Grupo de botões
Uma linha de botões de estilo secundário fundidos em um controle - borda compartilhada, raio/2lg e sombra/xs da família Botão, itens divididos por linhas de cabelo com apenas os cantos exteriores arredondados. Para um interruptor segmentado com um polegar animado, alcance para Controle Segmentado em vez disso; o grupo botão é o sabor barra de ferramentas / filtro.
Instalação
Você pode adicionar este componente de grupo de botão usando o nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add button-groupUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Itens selecionados
selecionado mantém um item em seu preenchimento hover e conjuntos aria-pressed - conduzi-lo do estado para barras de ferramentas simples ou multi-selecionadas.
const [view, setView] = useState("list");
<ButtonGroup aria-label="View"> {views.map(({ id, label, icon }) => ( <ButtonGroupItem key={id} leadingIcon={icon} selected={view === id} onClick={() => setView(id)} > {label} </ButtonGroupItem> ))}</ButtonGroup>Apenas Ícone
iconOnly os itens colapsam aos quadrados - dar a cada um um aria-label já que não há texto visível.
{/* Icon-only items are square - aria-label each one */}<ButtonGroup size="small" aria-label="Formatting"> <ButtonGroupItem iconOnly leadingIcon={RiBold} aria-label="Bold" /> <ButtonGroupItem iconOnly leadingIcon={RiItalic} aria-label="Italic" /> <ButtonGroupItem iconOnly leadingIcon={RiUnderline} aria-label="Underline" /></ButtonGroup>