Badge #
Badge is a small status indicator for another element.
import { PBadge } from 'pearkit';Basic #
Text to display is defined with the value property.
<PBadge value={1}/>Colors #
Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo
<PBadge color="red" value={2}/>
<PBadge color="indigo" value={7}/>
<PBadge color="yellow" value={12}/>
<PBadge color="sky" value={148}/>
<PBadge color="blue" value={34}/>Sizes #
3 sizes available. Of these, xs is selected by default, the other 2 options are sm and base.
<PBadge value={7}/>
<PBadge color="sky" size="sm" value={65}/>
<PBadge color="orange" size="base" value={300}/>Position #
You can position a block element whose container is relative by using style values.
<div className="relative w-[100px] h-[50px] border rounded">
<PBadge style={{position:'absolute', top: '-10px', right: '-10px'}} value={3}/>
</div>Accessibility (Not Ready Yet) #
None
Api #
Here you can see all the working features for the badge.
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Value of the component |
| size | string | xs | sm | base | xs | Sizes of the component |
| color | string | Tailwind Color Names | blue | Colors of the component. |