Divider

A Divider draws a thin line between blocks of content. It turns vertical in a flex row, with no extra styles.

Usage#

import { Divider } from "@clawscale/react";

<Divider />

Examples#

Basic#

In block layout, a divider spans the width of its container. compact removes its margin.

Rows scanned: 1,204,331

Rows written: 1,203,907

Rows rejected: 424

core/divider/basic.tsx

import { Divider } from "@clawscale/react";

export default function DividerBasic() {
  return (
    <div className="cs-numeric" style={{ width: "100%", maxWidth: 320 }}>
      <div>Rows scanned: 1,204,331</div>
      <Divider />
      <div>Rows written: 1,203,907</div>
      <Divider />
      <div>Rows rejected: 424</div>
    </div>
  );
}

Vertical#

In a flex row, such as a toolbar or Button group, a divider becomes a vertical line between items.

core/divider/vertical.tsx

import { Button, ButtonGroup, Divider } from "@clawscale/react";

export default function DividerVertical() {
  return (
    <ButtonGroup variant="minimal">
      <Button icon="undo" aria-label="Undo" />
      <Button icon="redo" aria-label="Redo" />
      <Divider />
      <Button icon="filter" text="Filter" />
      <Button icon="sort" text="Sort" />
      <Divider />
      <Button icon="download" text="Export" />
    </ButtonGroup>
  );
}

Props interface#

Divider also accepts the HTML attributes of its element.

interface DividerProps extends Props, React.HTMLAttributes<HTMLElement>@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`compact`	`boolean` = `false` If true, makes the Divider flush with adjacent content.
`tagName`	`keyof React.JSX.IntrinsicElements` = `"div"` HTML tag to use for element.