Separator is not interactive; mouse, keyboard or touch do not change its look.
| State |
Supported |
Visual change |
Tokens |
| Default |
Yes |
A 1 px rule |
color-border-subtle, border-width-default |
| Hover |
No |
None |
- |
| Pressed |
No |
None |
- |
| Focus |
No |
None; it takes no focus |
- |
| Disabled |
No |
None |
- |
| Labelled |
Yes |
The rule splits into two segments with text in the middle |
color-text-subtle, space-md |
| Property |
Value |
Token |
| Rule thickness |
1 px |
border-width-default |
| Horizontal rule width |
As wide as the container (w-full) |
- |
| Vertical rule height |
As tall as the row (self-stretch) |
- |
| Label to rule gap |
8 px |
space-md |
| Label type style |
body-sm (12 px / 16 px) |
text.body-sm |
Values are shown for the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-border-width-default | | 1px1px1px | 1px1px1px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
| Interaction |
Motion |
Reduced motion |
| Hover, press, focus |
None: Separator is not interactive |
Nothing to reduce |
| Enter and exit |
None: Separator appears and disappears at once |
Nothing to reduce |
Separator uses no motion preset. For motion values, see the Motion page.