Tag

Custom components for rendering tags

import { Tag, Icon } from 'react-native-magnus'

<Tag>Tag</Tag>
<Tag
  ml="sm"
  suffix={
    <Icon name="close" color="gray700" fontSize="caption" />
  }
>
  Close
</Tag>
<Tag
  ml="sm"
  suffix={
    <Icon name="edit" color="gray700" fontSize="caption" />
  }
>
  Edit
</Tag>
<Tag
  ml="sm"
  bg="yellow300"
  borderColor="yellow700"
  borderWidth={1}
>
  Custom Tag 1
</Tag>
<Tag
  ml="sm"
  bg="blue500"
  borderColor="blue700"
  borderWidth={1}
>
  Custom Tag 1
</Tag>
<Tag ml="sm" bg="blue700" color="white">
  Solid Tag
</Tag>

Props

PropertyDescriptionTypeDefault
mmargin`stringnumber`
mtmargin top`stringnumber`
mrmargin right`stringnumber`
mbmargin bottom`stringnumber`
mlmargin margin left`stringnumber`
mxmargin horizonal`stringnumber`
mymargin vertical`stringnumber`
ppadding`stringnumber`
ptpadding top`stringnumber`
prpadding right`stringnumber`
pbpadding bottom`stringnumber`
plpadding margin left`stringnumber`
pxpadding horizonal`stringnumber`
pypadding vertical`stringnumber`
ppaddingany-
hheightnumber-
wwidthnumber-
bgbackground colorstring-
minHmininmum heightnumber-
minWminimum widthstring-
roundedborder radius`stringnumber`
roundedTopborder radius top`stringnumber`
roundedBottomborder radius bottom`stringnumber`
roundedLeftborder radius left`stringnumber`
roundedRightborder radius right`stringnumber`
borderColorcolor for borderstring-
borderTopColorcolor for border topstring-
borderRightColorcolor for border rightstring-
borderLeftColorcolor for border leftstring-
borderBottomColorcolor for border bottomstring-
borderWidthwidth for bordernumber-
borderTopWidthwidth for border topnumber-
borderRightWidthwidth for border rightnumber-
borderLeftWidthwidth for border leftnumber-
borderBottomWidthwidth for border bottomnumber-
shadowdescribe the depth of shadow to be usednumber-
shadowColorcolor for shadowstring-
positionused to position the childrens`absolute”“relative”`
topnumber of logical pixels to offset the top edge of this component.number-
rightnumber of logical pixels to offset the right edge of this component.number-
bottomnumber of logical pixels to offset the bottom edge of this component.number-
leftnumber of logical pixels to offset the left edge of this component.number-