Navegar componentes

ToggleButtonGroup

MiscExemplo

Agrupa toggle buttons para comportamento exclusivo (single) ou multi-seleção. Usa discriminated union em type para value/onChange type-safe.

Importação

import {ToggleButtonGroup} from '@pharos-ds/core/ToggleButtonGroup';

Exemplos

type

orientation

size

Código

import {ToggleButtonGroup} from '@pharos-ds/core/ToggleButton';

<ToggleButtonGroup
  type="single"
  orientation="horizontal"
  size="md"
 />

Prop	Tipo	Padrão	Descrição
`children` *	`ReactNode`	—	Filhos ToggleButton.
`label` *	`string`	—	Rótulo acessível do grupo (aria-label).
`type`	`'single' \| 'multiple'`	`'single'`	Modo de seleção. Single permite um botão ativo, multiple permite vários.
`value` *	`string \| null \| string[]`	—	Valor(es) atualmente selecionado(s). O tipo depende do modo de seleção.
`onChange` *	`(value: string \| null \| string[]) => void`	—	Chamado quando a seleção muda.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direção de layout do grupo de botões.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho padrão dos botões no grupo. Botões individuais podem substituir.
`isDisabled`	`boolean`	`false`	Se todos os botões do grupo estão desabilitados.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para personalização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create().
`data-testid`	`string`	—	Seletor de teste para frameworks de testes automatizados.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/ToggleButtonGroup