Primitivelayout

Separator

Stable

Régua de um pixel entre duas coisas, horizontal ou vertical. Composto sobre Base UI Separator. A única decisão que ele carrega não é visual: se apagar a régua fundiria duas coisas que significam coisas diferentes, ela é estrutura e o leitor de tela deve ouvi-la; se apagá-la só deixaria o layout mais apertado, ela é decoração e `decorative` a tira da árvore de acessibilidade.

Instalação

npx up-web-ds add separator

Preview

Basic

Proveniência

Distribuição

Default

Proveniência

Ingerido de shadcn/ui e normalizado sobre a Foundation.

Distribuição

Interna. O registry de consumo publica apenas itens stable.

Vertical

PrimitiveOverlaystable

Decorative

  • DS001Valor visual hardcoded
  • DS005Examples ausentes
  • DS011`stable` sem Definition of Done
  • DS014Movimento sem política de Reduced Motion

All states

Basic

Proveniência

Distribuição

Default

Proveniência

Ingerido de shadcn/ui e normalizado sobre a Foundation.

Distribuição

Interna. O registry de consumo publica apenas itens stable.

Vertical

PrimitiveOverlaystable

Decorative

  • DS001Valor visual hardcoded
  • DS005Examples ausentes
  • DS011`stable` sem Definition of Done
  • DS014Movimento sem política de Reduced Motion

Usage

@/components/ui/separator
import { Separator } from '@/components/ui/separator'
Separator
<div className="flex w-full max-w-sm flex-col gap-3">
  <p className="type-small">Proveniência</p>
  <Separator />
  <p className="type-small">Distribuição</p>
</div>

Props

Props de Separator
PropTypeDefaultDescription
decorativebooleanfalse
classNamestring | ((state: SeparatorState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
orientationOrientation'horizontal'The orientation of the separator.
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
styleReact.CSSProperties | ((state: SeparatorState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

Estende SeparatorPrimitive.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

Metadata

Notas de acessibilidade

Não é interativo: não entra na sequência de tabulação, não tem estado e não anima, então teclado, alvo de toque e movimento não têm superfície onde falhar. Leitor de tela verificado por teste: por padrão tem papel separator com aria-orientation acompanhando a orientação, e `decorative` o remove da árvore por completo em vez de apenas silenciar o papel — uma régua decorativa anunciada uma vez por linha transforma uma lista de quatro itens em oito coisas. Contraste verificado nos dois temas: a régua é o token --border, que já é o valor de hairline da Foundation em light e dark.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
layout
Status
Stable

Origem e distribuição

Fonte
shadcn registry / separator
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/separator.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
@base-ui/react
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Button GroupItemOTP FieldSidebarToggle Group