components
Divider
v.1.0.0 | Saturn
StorybookUsed to separate different sections or blocks of content.
import { Divider } from '@kubit-ui-web/react-components'
1
<Divider variant="DEFAULT" leftLabel={{ content: 'Left 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 styles for its quick use, access them through the variant prop.
12
<Divider variant='DEFAULT'/> <Divider variant='SECONDARY'/>
Label
Labels and sublabels can be added to the component.
1234567
<Divider
variant="DEFAULT"
leftLabel={{ content: 'Left Label' }}
leftSublabel={{ content: 'Left Sublabel' }}
rightLabel={{ content: 'Right Label' }}
rightSublabel={{ content: 'Right Sublabel' }}
/>Tooltip
A tooltip component can be added next to the leftLabel for giving further information or context. Use the following props for full customization:
- icon: button that trigger and display the tooltip.
- iconTooltip: object where tooltip content must be indicated (Tooltip reference).
123456
<Divider
variant="DEFAULT"
leftLabel={{ content: 'Left Label' }}
icon={{ icon: 'ICON_INFO_CIRCLE' }}
iconTooltip={{ title: { content: 'Tooltip Title' }, content: { content: 'Tooltip Content' } }}
/>