Component representing a badge.
Usage
import { Badge } from '@admin-bro/design-system'
const MyComponent = () => (
<Badge>My badge</Badge>
)
Props
The Badge Component takes 3 custom props:
variantoutlinesize
Apart from them you can also pass ColorProps, SpaceProps and TypographyProps. See BadgeProps below.
Examples
Check out the following examples.
- Mixed versions
- Outline
- Different sizes
- Color variants
- Mixed with other elements
Type Definitions
object
# BadgeProps
Prop Types of a Badge component. Apart from those defined below it extends all ColorProps, SpaceProps and TypographyProps
Usage
import { BadgeProps } from '@admin-bro/design-system'
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
... |
string |
<optional> |
Other props from ColorProps, SpaceProps and TypographyProps |
variant |
VariantType |
<optional> |
Color variant |
outline |
boolean |
<optional> |
Outline version |
size |
'sm' | 'lg' | 'default' |
<optional> |
Size variant |
