ComponentsSeparator

Separator

A visual divider between sections or groups of controls.

Base UI referenceSource
EXAMPLEwasm · webgpu

This demo runs the real GPUI component on WebGPU, which this browser does not expose.

Try Chrome or Edge 113+, or Safari 26+. In Firefox, enable dom.webgpu.enabled.

You can also run it natively: cargo run -p showcase separator

The demo failed to start in this browser.

You can run it natively instead: cargo run -p showcase separator

Live examples are not supported on most mobile browsers yet — open this page on a desktop or tablet to run the demo.

Recent phones with WebGPU may manage it (downloads ~18 MB):

#Anatomy

Import the component's parts and compose them under its root:

use base_gpui::separator::{
    Separator,
};

Separator::new();
The anatomy is a structural overview. Parts with mutually exclusive modes may need separate instances; each part's section below documents its configuration.

#Separator

Visual separator between neighboring items or groups.

Source

use base_gpui::separator::Separator;

Separator::new()
    .id("example-id")
    .orientation(/* orientation: SeparatorOrientation */)
    .horizontal()
    .vertical()
    .style_with_state(|/* callback arguments */| { /* handle change */ });

#Builders

BuilderSignature & description
.newpub fn new() -> Self

Creates a Separator with its default configuration.

.idpub fn id(mut self, id: impl Into<ElementId>) -> Self
  • id: impl Into<ElementId>

Overrides the default "separator" element id. Give each separator in a window a distinct, stable id so assistive technology sees stable accessibility nodes across frames.

.orientationpub fn orientation(mut self, orientation: SeparatorOrientation) -> Self
  • orientation: SeparatorOrientation

Sets the component's horizontal or vertical orientation and corresponding keyboard behavior.

.horizontalpub fn horizontal(self) -> Self

Sets the horizontal configuration for this part.

.verticalpub fn vertical(self) -> Self

Sets the vertical configuration for this part.

.style_with_statepub fn style_with_state(mut self, style: impl Fn(SeparatorStyleState, Div) -> Div + 'static,) -> Self
  • style: impl Fn(SeparatorStyleState, Div) -> Div + 'static,

Styles the part from its current behavioral state while preserving separation between behavior and visual design.

Separator also supports the GPUI traits implemented in its source, such as standard styling or child composition.

#Accessibility

Keyboard interaction and accessibility semantics are implemented by the component, independently of visual styling. Known limitations caused by missing GPUI accessibility primitives are documented in the module source and are not silently approximated.

#Stability

Base GPUI is pre-1.0. Builder names and state types may evolve as GPUI and this port mature.

PreviousSelectNextSlider