Component reference

Separator

A thin rule that divides groups of content or tools.

Preview

Content and tool groups

A separator expresses a content boundary and adds no focusable action by default.

packages/meowtail/stories/foundations.stories.tsxline 109tsx

render: () => (
  <Specimens>
    <Specimen label="Between content groups" width="narrow">
      <Stack gap="compact">
        <Text>
          <strong>Work record</strong>
        </Text>
        <Text variant="secondary">Changes and follow-up actions are grouped separately.</Text>
      </Stack>
      <Separator />
      <Text variant="secondary">Follow-up actions start below the rule.</Text>
    </Specimen>
    <Specimen label="Between tools" align="start">
      <Inline gap="compact" align="center" wrap={false}>
        <Button variant="quiet">View changes</Button>
        <Separator orientation="vertical" style={{ height: "20px" }} />
        <Button variant="quiet">Copy link</Button>
      </Inline>
    </Specimen>
  </Specimens>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Separator } from "meowtail";

<Separator />

API reference

Props

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as separator in the meowtail component registry.