MenuCaderno UI
npmGitHub
Theme

<cad-divider>

Divider

Separate sections with a line, an optional label, or an icon.

Divider treatments

Center label

Icon + label

Dashed divider

Light section divider

Double divider

API reference: <cad-divider>

decorativedecorativebooleantruedensitydensityCadDividerDensity'regular'labellabelstring''orientationorientationCadDividerOrientation'horizontal'semanticsemanticbooleanfalsetonetoneCadDividerTone'accent'variantvariantCadDividerVariant'solid'decorativebooleandecorativeyesdensityCadDividerDensitydensityyeslabelstringlabelnoorientationCadDividerOrientationorientationyessemanticbooleansemanticyestoneCadDividerTonetoneyesvariantCadDividerVariantvariantyes(default)Optional centered label.startOptional icon or leading mark beside the label.baseSeparator row.contentCentered label container.lineEach separator line.--cad-divider-colorPer-instance separator color.

Accessibility

Unlabeled lines are decorative. Add semantic when the separator needs to be announced as page structure.

MIT licensed. Built with Caderno UI.Report an issue
Back to top