components
Line Separator
v.1.0.0 | Saturn
StorybookUsed to separate sections of elements.
import { LineSeparator } from '@kubit-ui-web/react-components'
1
<LineSeparator lineVariant="LINE_DEFAULT" labelVariant="LABEL_DEFAULT" label={{ content: 'LABEL' }} />Variant
To manage the appearance of the lineSeparator component, use the lineVariant and labelVariant props.
- Use the lineVariant prop to set the predefined style for the line.
- Use the labelVariant prop to set the predefined style for the label.
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.
Line Variant
1
<LineSeparator lineVariant="LINE_DEFAULT" labelVariant="LABEL_DEFAULT" label={{ content: 'LABEL' }} />Label Variant
Note that the label and labelVariant prop are optional.
123
<LineSeparator lineVariant="LINE_DEFAULT" labelVariant="LABEL_INFORMATIVE" label={{ content: 'LABEL' }} /> <LineSeparator lineVariant="LINE_DEFAULT" labelVariant="LABEL_DEFAULT" label={{ content: 'LABEL' }} /> <LineSeparator lineVariant="LINE_DEFAULT" />