Overview
The Separator is an element who's purpose is to divide section content within a group of items. It's delicate horizontal border offers sufficient contrast to delineate it as a distinct element. It is purely presentational and has no action associated with it.
Design
Box Model
This composable uses some of the visual styles from the Basic Activation [Composable], such as the background color, and the min / max width. It includes the following styles to distinguish from menu items.
- Horizontal Separator: neutral-400 (#8C93A6), 1px solid
- Height: 9 RT
- Margin / Padding: Left / Right 16px, Top / Bottom 4px
Responsive
Same as the standard menu item
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) separator: 1px solid, neutral-400 (#8C93A6) orientation: horizontal |
| Focus | N/A | N/A |
| Disabled | N/A | N/A |
| Read-only | N/A | N/A |
| Hover | N/A | N/A |
| Error | N/A | N/A |
Configurations
Not applicable
Use Cases
| Original Scenario | Dimsum's version | Scenario Description |
|---|---|---|
 |  | Activation Menu with Group Label and Separator shown with Group Label and Separator used in a Page Header Toolbar (triggered from a filled toggle button) |
Examples
| Scenario Graphic | Scenario Solution | Text Resize and Reflow (200%) | Scenario Description |
|---|---|---|---|
 |  |  | Activation Menu with Separator an element who's purpose is to divide section content within a group of items. It's delicate horizontal border offers sufficient contrast to delineate it as a distinct element. It is purely presentational and has no action associated with it. |
Digital Accessibility
There are no related A11y concerns.
Variants
Not applicable
Usage Warnings
No known-of issues
Reference
Not applicable