Segment

Escolhe uma entre poucas visões ou modos, num controle compacto.

O Segment é o controle segmentado: de duas a cinco opções mutuamente exclusivas que mudam a visão logo abaixo, como "Todos / Exceções / Pausados" ou o idioma da prévia. Para trocar de seção com conteúdo próprio use Tabs; para uma lista longa de opções, Select.

import { Segment } from "@rastreio-x/ui";

Padrão

Cada Segment.Item tem um id. O controle exige aria-label, porque não há rótulo visível.

Tamanhos

sm, md (padrão) e lg. No Admin, sm é o usual em barras de ferramentas.

Fantasma

variant="ghost" tira o fundo do contêiner e deixa só o indicador, para contextos discretos.

Com ícones

Ícone mais texto: o ícone é decorativo (aria-hidden).

Controlado

selectedKey e onSelectionChange sincronizam a escolha com o estado ou com a URL.

Prévia da Página pública em: celular

Desabilitado

O controle todo (isDisabled) ou só um item.

Anatomia

Segment
├── Segment.Item
└── Segment.Separator

Segment: o grupo de botões de alternância, com escolha única.
Segment.Item: cada opção, com o indicador de seleção deslizante.
Segment.Separator: divisor opcional, sempre dentro de um Segment.Item.

Propriedades

Segment:

Segment
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`children`	`ChildrenOrFunction<ToggleButtonGroupRenderProps>`	-	Conteúdo do componente.
`className`	`string`	`'react-aria-ToggleButtonGroup'`	Classes CSS aplicadas ao elemento.
`defaultSelectedKey`	`Key`	-	Chave selecionada inicialmente (não controlado).
`disallowEmptySelection`	`boolean`	-	Impede ficar sem nenhum item selecionado.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onSelectionChange`	`((key: Key) => void)`	-	Chamada quando a seleção muda.
`orientation`	`Orientation`	`'horizontal'`	Orientação: `horizontal` (padrão) ou `vertical`.
`render`	`DOMRenderFunction<'div', ToggleButtonGroupRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`selectedKey`	`Key \| null`	-	Chave selecionada (controlado).
`size`	`'lg' \| 'md' \| 'sm'`	`"md"`	Tamanho: `sm`, `md` (padrão) ou `lg`.
`style`	`StyleOrFunction<ToggleButtonGroupRenderProps>`	-	Estilos em linha aplicados ao elemento.
`variant`	`'ghost' \| 'default'`	`"default"`	Estilo: `default` ou `ghost`.

Segment.Item:

Segment.Item
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`children`	`ChildrenOrFunction<ToggleButtonRenderProps>`	-	Conteúdo do componente.
`className`	`string`	`'react-aria-ToggleButton'`	Classes CSS aplicadas ao elemento.
`defaultSelected`	`boolean`	-	Estado selecionado inicial (não controlado).
`excludeFromTabOrder`	`boolean`	-	Tira o elemento da ordem do Tab. Evite, salvo quando há outro caminho pelo teclado.
`id`	`Key`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isSelected`	`boolean`	-	Estado selecionado (controlado).
`onChange`	`((isSelected: boolean) => void)`	-	Chamada quando o valor ou a seleção muda.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`preventFocusOnPress`	`boolean`	-	Impede que o foco vá para o elemento ao pressioná-lo. Pode prejudicar a acessibilidade.
`render`	`DOMRenderFunction<'button', ToggleButtonRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<ToggleButtonRenderProps>`	-	Estilos em linha aplicados ao elemento.

Animações

CSS
indicativo

O indicador desliza até a opção escolhida em transição curta de CSS. Com prefers-reduced-motion, a folha global da fachada reduz a transição a 0,01 ms: o indicador salta direto.

Acessibilidade

Baseado em ToggleButtonGroup do React Aria: cada item é um botão com aria-pressed, dentro de um grupo com aria-label.
Teclado: Tab entra no grupo, setas movem o foco, Espaço ou Enter escolhem.
Sempre há um item escolhido; use defaultSelectedKey ou selectedKey.
A opção ativa não depende só da cor: o indicador também a marca.

Boas práticas

Faça

Duas a cinco opções curtas, em substantivos ou adjetivos: Todos, Exceções, Pausados.

Evite

Opções longas que quebram linha, ou um Segment para navegar entre páginas.

Dê aria-label ao grupo ("Visão dos Pedidos").
Mantenha a ordem estável e a primeira opção como padrão.
Para mais de cinco opções, troque por Select.

Relacionados

Tabs para seções com conteúdo próprio.
Select para listas maiores.
RadioButtonGroup para uma escolha em formulário.