Tag
Types
Use any of the available Tags by changing the type prop.
import { Tag } from "chic-ui";
<Tag>Primary</Tag>
<Tag type="secondary">Secondary</Tag>
<Tag type="danger">Danger</Tag>
<Tag type="success">Success</Tag>
<Tag type="warning">Warning</Tag>
<Tag type="light">Light</Tag>
Rounded Tags
Get pill shaped tags using the rounded prop.
import { Tag } from "chic-ui";
<Tag>Primary</Tag>
<Tag type="secondary" rounded>Secondary</Tag>
<Tag type="danger" rounded>Danger</Tag>
<Tag type="success" rounded>Success</Tag>
<Tag type="warning" rounded>Warning</Tag>
<Tag type="light" rounded>Light</Tag>
API
import { Tag } from 'chic-ui';
| Name | Type | Default | Description |
|---|---|---|---|
| type | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light' | 'primary' | Color of the switch |
| rounded | boolean | false | Rounded tags |
| className | string | Provide external classnames to the component | |
| style | React.CSSProperties | Override default styling of the component |