Separator | RiseUI

Horizontal and vertical dividers with HeroUI tones, optional labeled rule, and surface-aware demos.

Usage

Horizontal rule under intro; row links with vertical separators (Storybook Default).

Column(
  children: [
    Text('Intro copy'),
    SizedBox(height: 16),
    RiseSeparator(),
    SizedBox(height: 16),
    Row(
      children: [
        Text('Blog'),
        SizedBox(
          height: 24,
          child: RiseSeparator(orientation: RiseSeparatorOrientation.vertical),
        ),
        Text('Docs'),
      ],
    ),
  ],
)

Vertical

`separator--vertical` in a height-bounded row (Storybook Vertical).

SizedBox(
  height: 48,
  child: Row(
    children: [
      Text('Left'),
      RiseSeparator(orientation: RiseSeparatorOrientation.vertical),
      Text('Right'),
    ],
  ),
)

With content

Icon steps + plain `RiseSeparator` blocks + `RiseLabeledSeparator` (Storybook With).

Column(
  children: [
    Text('Step title'),
    RiseSeparator(),
    SizedBox(height: 16),
    RiseLabeledSeparator(child: Text('OR')),
    Text('Next step'),
  ],
)

Variants

Default, secondary, tertiary line contrast (`bg-separator*`).

RiseSeparator(tone: RiseSeparatorTone.default_)
RiseSeparator(tone: RiseSeparatorTone.secondary)
RiseSeparator(tone: RiseSeparatorTone.tertiary)

With surface

Separators on default / secondary / tertiary RiseSurface shells.

RiseSurface(
  variant: RiseSurfaceVariant.default_,
  child: Column(
    children: [
      Text('Heading'),
      RiseSeparator(),
      Text('Body'),
    ],
  ),
)