SegmentControl

Conjunto de segmentos em camadas exibidos um de cada vez.

Exemplos

Pequeno

Médio

Grande

Desabilitado

Só ícones

Só ícones com tooltip

API

SegmentControl

Propriedade	Tipo	Padrão	Descrição
size	"sm" | "md" | "lg"	"md"	Controla o tamanho dos Triggers; todos herdam do componente pai.
className	string	-	Classes adicionais para o container raiz.
...props	React.ComponentProps<Tabs.Root>	-	Props nativas do Root do Radix Tabs.

SegmentControlList

Propriedade	Tipo	Padrão	Descrição
containerClassName	string	-	Classes aplicadas ao wrapper com rolagem (ScrollArea).
className	string	-	Classes aplicadas direto na lista (Tabs.List).
...props	React.ComponentProps<Tabs.List>	-	Props nativas do List do Radix Tabs.

SegmentControlTrigger

Propriedade	Tipo	Padrão	Descrição
icon	React.ReactNode	-	Ícone opcional exibido à esquerda do label.
tooltip	React.ReactNode	-	Conteúdo opcional do tooltip, exibido no hover/foco da aba inteira (não só do ícone). Também é a descrição acessível da aba (aria-describedby), então os leitores de tela leem esse texto depois do nome; evite repetir nele o label da aba.
tooltipSide	"top" | "right" | "bottom" | "left"	"top"	Lado em que o tooltip é posicionado em relação à aba. Só é usado quando tooltip está definido.
badge	number | string	-	Badge opcional exibido no fim; fica oculto com 0/"0"/vazio e enquanto o trigger está disabled.
badgeVariant	"regular" | "freemium" | "error" | "warning" | "neutral"	"regular"	Estilo visual do badge.
className	string	-	Classes adicionais para o trigger.
...props	React.ComponentProps<Tabs.Trigger>	-	Props nativas do Trigger do Radix Tabs.

SegmentControlContent

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes adicionais para o conteúdo.
...props	React.ComponentProps<Tabs.Content>	-	Props nativas do Content do Radix Tabs.