https://azir.io/docs
Azir Framwork :Badge
Please make sure you have azir-theme version 1.0.5 or above ;) .
Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user.
Installation
to install the latest version of azir-badge
you only need to run:
npm install azir-badge --save
or
yarn add azir-badge
Examples
Basic :
import Badge from "azir-badge";import Avatar from "azir-avatar";---<Badge ="+99" ="warning" ="tl" ="xsmall" = ="large" = => <Avatar ="large" = = /></Badge>
Badge with Icon :
import Badge from "azir-badge";import Icon SolidIcons from "azir-icon";---<Badge = = ="12" = = ="tr" ="warning" ="xxsmall" = = > <Icon =></Icon></Badge>
Icon Badge :
import Badge from "azir-badge";import Avatar from "azir-avatar";import Icon SolidIcons from "azir-icon";---<Badge = = = ="small" = ="tl" = ="error" ="xxsmall" => <Avatar ="small" = = /></Badge>
Props
badgeContent
onPress
color
size
badgePosition
rounded
contentSize
contentRounded
containerStyle
badgeStyle
style
textStyle
Reference
badgeContent
Badge content.
Type | Required | Default |
---|---|---|
String, JSX element | No | null |
onPress
Handler to be called when the user taps the badge
Type | Required |
---|---|
function | Yes |
color
Background Color of the badge
Type | Required | Default |
---|---|---|
azir-color | No | theme |
size
set the badge component Size.
Type | Required | Default |
---|---|---|
azir-size | No | Empty content : 22 , Content : 30 |
badgePosition
Badge Position based on its content. tl= top left, tr = top right, bl = bottom left, br = bottom right
Type | Required | Default |
---|---|---|
"tl" , "tr" , "bl" , "br" | No | tl |
rounded
Makes the Badge circular or square
Type | Required | Default |
---|---|---|
boolean | No | true |
contentSize
set the badge content Size ( its very important prop with also contentRounded to exactly draw the badge related to the content).
should match the child size
Type | Required | Default |
---|---|---|
azir-size | No | null |
contentRounded
if you have a rounded child then you need to set the prop to true to exactly draw the badge in the right position.
Type | Required | Default |
---|---|---|
boolean | No | false |
shadow
If true, show shadow effect for this component.
Type | Required | Default |
---|---|---|
bool | No | false |
containerStyle
override Badge main Container Style
Type | Required |
---|---|
style | No |
badgeStyle
override Badge Style in case you want to change the badge position
Type | Required |
---|---|
style | No |
style
override Badge container style
Type | Required |
---|---|
style | No |
textStyle
override Badge Text Style in case you bas the content as string
Type | Required |
---|---|
style | No |