Badge
Badges are used for showing a small amount of color-categorized metadata.
| Install | yarn add @diallink-corp/convergo-react-badge |
|---|---|
| Version | 4.1.2 |
| Usage | import {Tag} from '@diallink-corp/convergo-react-badge' |
Variants
The badge component supports various variants to indicate the status of the item it is attached to.
<Badge color='positive' variant='contained'>Positive</Badge>
<Badge color='positive' variant='outlined'>Positive</Badge>
<Badge color='info' variant='contained'>Info</Badge>
<Badge color='info' variant='outlined'>Info</Badge>
<Badge color='warning' variant='contained'>Warning</Badge>
<Badge color='warning' variant='outlined'>Warning</Badge>
<Badge color='negative' variant='contained'>Negative</Badge>
<Badge color='negative' variant='outlined'>Negative</Badge>
<Badge color='neutral' variant='contained'>Neutral</Badge>
<Badge color='neutral' variant='outlined'>Neutral</Badge><Badge color="positive" variant="contained">
Positive
</Badge>
<Badge color="positive" variant="outlined">
Positive
</Badge>
<Badge color="info" variant="contained">Info</Badge>
<Badge color="info" variant="outlined">Info</Badge>
<Badge color="warning" variant="contained">Warning</Badge>
<Badge color="warning" variant="outlined">Warning</Badge>
<Badge color="negative" variant="contained">
Negative
</Badge>
<Badge color="negative" variant="outlined">
Negative
</Badge>
<Badge color="neutral" variant="contained">Neutral</Badge>
<Badge color="neutral" variant="outlined">Neutral</Badge><Badge
color="positive"
variant="contained"
>
Positive
</Badge>
<Badge
color="positive"
variant="outlined"
>
Positive
</Badge>
<Badge
color="info"
variant="contained"
>
Info
</Badge>
<Badge
color="info"
variant="outlined"
>
Info
</Badge>
<Badge
color="warning"
variant="contained"
>
Warning
</Badge>
<Badge
color="warning"
variant="outlined"
>
Warning
</Badge>
<Badge
color="negative"
variant="contained"
>
Negative
</Badge>
<Badge
color="negative"
variant="outlined"
>
Negative
</Badge>
<Badge
color="neutral"
variant="contained"
>
Neutral
</Badge>
<Badge
color="neutral"
variant="outlined"
>
Neutral
</Badge>Size
The badge component supports various sizes.
<Badge size='small'>Small</Badge>
<Badge size='medium'>Medium</Badge>
<Badge size='large'>Large</Badge><Badge size='small'>Small</Badge>
<Badge size='medium'>Medium</Badge>
<Badge size='large'>Large</Badge><Badge size="small">
Small
</Badge>
<Badge size="medium">
Medium
</Badge>
<Badge size="large">
Large
</Badge>Shape
The badge component supports various shapes.
<Badge size="small" shape="box" color="info" variant="outlined">New</Badge>
<Badge size="small" shape="circle" color="negative" variant="contained">
1
</Badge>
<Badge size="medium" shape="box" color="info" variant="outlined">New</Badge>
<Badge size="medium" shape="circle" color="positive" variant="outlined">
10
</Badge>
<Badge size="large" shape="box" color="info" variant="outlined">New</Badge>
<Badge size="large" shape="circle" color="info" variant="contained">
100
</Badge><Badge
size="small"
shape="box"
color="info"
variant="outlined"
>
New
</Badge>
<Badge
size="small"
shape="circle"
color="negative"
variant="contained"
>
1
</Badge>
<Badge
size="medium"
shape="box"
color="info"
variant="outlined"
>
New
</Badge>
<Badge
size="medium"
shape="circle"
color="positive"
variant="outlined"
>
10
</Badge>
<Badge
size="large"
shape="box"
color="info"
variant="outlined"
>
New
</Badge>
<Badge
size="large"
shape="circle"
color="info"
variant="contained"
>
100
</Badge><Badge
size="small"
shape="box"
color="info"
variant="outlined"
>
New
</Badge>
<Badge
size="small"
shape="circle"
color="negative"
variant="contained"
>
1
</Badge>
<Badge
size="medium"
shape="box"
color="info"
variant="outlined"
>
New
</Badge>
<Badge
size="medium"
shape="circle"
color="positive"
variant="outlined"
>
10
</Badge>
<Badge
size="large"
shape="box"
color="info"
variant="outlined"
>
New
</Badge>
<Badge
size="large"
shape="circle"
color="info"
variant="contained"
>
100
</Badge>