Chip
The Chip component is a flexible and customizable UI element used to display small pieces of information, tags, or actions. It supports different variants, colors, sizes, and can include icons or be dismissible for enhanced interactivity.
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 Chip from '@start-base/start-ui/Chip';Usages
Chip Default(Primary)
Chip
Chip Secondary
Chip
Chip Info
Chip
Chip Success
Chip
Chip Warning
Chip
Chip Error
Chip
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| children | string | Children of the Chip | ||
| color | string | primary | primary secondary success info warning error | Color of the Chip |
| className | string | Classname of the Chip |