Badge
A series of interactive headings arranged vertically, each revealing a section of content when clicked.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Badge from '@start-base/start-ui/Badge';Usages
Badge Default
10
Example
Badge With Color
10
Example
Badge with dot variant
Example
Badge with position
10
Example
Badge with position
10
Example
Badge with max content
500
Example
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| content | string | Content of the Badge | ||
| color | number | primary secondary success error | Color of the Badge | |
| variant | string | default | default dot | Variant of the Badge |
| position | string | top-end top top-start start bottom-start bottom bottom-end end | Position of the Badge | |
| invisible | boolean | false | Invisible of the Badge | |
| className | string | Classname of the Badge | ||
| containerClassName | string | Container Classname of the Badge | ||
| children | object | Children of the Badge |