Chip
Playground
Label
1
2
3
4
5
6
7
import { Chip, type ChipProps } from '@creation-ui/react'
const ChipExample = (props: ChipProps) => {
return <Chip label='Label' variant='contained' color='primary' />
}
Adornments
Adornments are icons or other elements that can be added to the start or end of the Input component for additional interactivity or visual feedback:
Chip
Start
End
Both
Jackpot
Clickable
Chip becomes clickable with cursor-pointer applied when onClick is passed in props.
#flowers
<Chip
variant='outlined'
label={'#flowers'}
onClick={() => alert('Chip clicked')}
/>What if I want a color other than available in color?
For this use case, you can use the style prop to customize the color of the chip. For example:
Indefatigable
Be aware that this will override the default coloring styles of the chip. Notice that bg hover effect was lost as it came from now disabled color styling.
export const CustomChip = () => (
<Chip
variant='unstyled'
label='Indefatigable'
style={{
color: 'rgba(255, 153, 0)',
backgroundColor: 'rgba(255, 153, 0, 0.1)',
borderColor: 'rgba(255, 153, 0, 0.5)',
}}
/>
)Component API
Chip component props
| Prop | Default | Description |
label | — | React.ReactNodeLabel |
color | — | primary | error | warning | success | mono | undefinedStatus |
variant | contained | contained | outlined | textVariant of the element |
Last updated on