Separator

A single dividing rule.

A rule between sections. With orientation="vertical" the parent needs a height.

export const client = "only";

import { Separator } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-80">
      <div className="text-sm font-medium">売上サマリー</div>
      <p className="text-sm text-muted-foreground">直近 30 日の集計です。</p>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-3 text-sm">
        <span>CSV</span>
        <Separator orientation="vertical" />
        <span>JSON</span>
        <Separator orientation="vertical" />
        <span>Parquet</span>
      </div>
    </div>
  );
}

import { Separator } from "@squadbase/vantage/ui";

PropType

orientation?"horizontal" | "vertical"

Which way the rule runs.

Type"horizontal" | "vertical"

Default"horizontal"

It is decorative, so assistive technology skips it.