Foundations
Separator
The DS separator (Figma "Separator" 168:161).
Horizontal and Vertical are base-ui separators (role="separator", aria-orientation). Divider splits two ways of doing the same thing: its rules are decorative and its label is read as plain text.
<Separator />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Separator
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Type · Horizontal
| Separator |
|---|
Type · Vertical
| Separator |
|---|
Type · Divider
| Separator |
|---|
ou entre com |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type? | "divider" | "horizontal" | "vertical" | — | Figma "Type": a plain rule, across or down. A rule with a centred label ("ou entre com"). |
| className? | string | — | |
| children? | ReactNode | — | The Figma "Label" text. |