components
Chip
v.1.0.0 | Saturn
StorybookSmall elements that represent an input, attribute or action. They allow users to enter information, make sections, filter content or trigger actions.
<Chip variant="DEFAULT" label={{ content: 'label' }} />Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for its quick use. Access them through the variant prop:
<Chip variant="DEFAULT" label={{ content: 'label' }} />State
State variant in chip are used to track and visual reflecting dynamic changes in its state.
<Chip variant="DEFAULT" state="DEFAULT" label={{ content: 'label' }} /> <Chip variant="DEFAULT" state="DISABLED" label={{ content: 'label' }} /> <Chip variant="DEFAULT" state="ERROR" label={{ content: 'label' }} />
Delete action
Components with the onClose prop defined will display a closeIcon for trigger the action of deleting the chip.
<Chip variant="DEFAULT" state="DEFAULT" label={{ content: 'label' }} closeIcon={{ icon: 'ICON_X_CIRCLE' }} />Icon
An icon can be added for decorative purposes through the leftIcon prop.
<Chip variant="DEFAULT" label={{ content: 'label' }} leftIcon={{ icon: 'ICON_GHOST' }} />Range
In some cases the chip can show two or more labels through the range prop. Set the rangeIcon or rangeSeparator for differenciate each label.
<Chip
variant="DEFAULT"
leftIcon={{ icon: 'ICON_GHOST' }}
range={[{ label: 'label 1' }, { label: 'label 2' }]}
rangeSeparator={{ content: '->' }}
/>