Separator
Separate content with a horizontal or vertical line.
1use herogpui::components::separator::Separator;Usage
1use herogpui::prelude::Separator;
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .w_full()
7 .flex()
8 .flex_col()
9 .gap(px(12.))
10 .child(gpui::div().child("Above"))
11 .child(Separator::new())
12 .child(gpui::div().child("Below"))Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Separator
Separator is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Separator uses.
Styling
| Style | Description |
|---|---|
flex_shrink_0 + hairline_radius + colors.separator + w_full/h(border_width) | Base line geometry, color and default horizontal orientation. |
Orientation::Horizontal => w_full().h(weight) | Horizontal separator dimensions. |
Orientation::Vertical => h_full().min_h(px(8.)).w(weight) | Vertical separator dimensions; uses full parent height instead of h-auto/self-stretch. |
SeparatorVariant::Default => colors.separator | Default separator semantic color. |
SeparatorVariant::Secondary => colors.separator_secondary() | Secondary separator semantic color. |
SeparatorVariant::Tertiary => colors.separator_tertiary() | Tertiary separator semantic color. |
content branch flex + items_center + gap(px(12.)) | Container used when content divides two line segments. |
horizontal content branch w_full().flex_row() | Horizontal content-container axis. |
vertical content branch h_full().flex_col().justify_center() | Vertical content-container axis. |
line flex_shrink_0 + flex_grow() | Each line beside composed content grows into remaining space. |
content div flex + items_center + justify_center + text_center + whitespace_nowrap + colors.muted | Centered, non-wrapping composed content. |
content div text_center() | Both orientation-specific content modifiers keep centered text. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
orientation( | Orientation | Orientation:: | The orientation of the separator. |
variant( | SeparatorVariant | SeparatorVariant:: | The visual variant of the separator. |
Parts
| Part | Description |
|---|---|
Separator | Root separator primitive and data-slot owner. |