A line between groups of content, horizontal or vertical, decorative by default.

WebStableMise en page

Web uniquement — React, depuis @krizaka/ui/separator. Stable : son API ne change qu’à une version majeure.

Quand l’utiliser

Between groups of a list or a menu.
Between items of a toolbar or a row of links (orientation="vertical").

Quand ne pas l’utiliser

To separate every item of a list: use spacing.
To separate items of a menu.À la place : Dropdown menu

Installation

Installer

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Separator } from "@krizaka/ui/separator";

Exemples

Horizontal

Between two groups.

Account

Notifications

import { Separator } from "@krizaka/ui/separator";

export default function SeparatorHorizontal() {
  return (
    <div className="flex w-72 flex-col gap-3 text-sm text-fg">
      <p>Account</p>
      <Separator />
      <p className="text-fg-secondary">Notifications</p>
    </div>
  );
}

Vertical

Between items of a row, as real separators.

Videos

Live

Shop

import { Separator } from "@krizaka/ui/separator";

// `decorative={false}`: a real separator, read by assistive technology.
export default function SeparatorVertical() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm text-fg-secondary">
      <span>Videos</span>
      <Separator orientation="vertical" decorative={false} />
      <span>Live</span>
      <Separator orientation="vertical" decorative={false} />
      <span>Shop</span>
    </div>
  );
}

Props

Ce module n'a pas de props de composant : voir l'import et l'aperçu ci-dessus.

Accessibilité

Radix Separator: decorative by default (role="none"); decorative={false} gives role="separator" and its orientation.

Bonnes pratiques

Prefer space to lines; a separator marks a change of group.
decorative={false} only when the separation means something to a screen-reader user.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Separator