Carregando…Carregando…Carregando…Carregando…Standalone pressed/unpressed button (aria-pressed) — favorite, mute, bold/italic isolado numa toolbar.
$ npx kikitocn add toggle@/lib/utilsimport { Toggle } from "@/components/ui/cn/toggle/Toggle";
export function ToggleExample() {
return (
<Toggle variant="outline" size="sm">
Toggle
</Toggle>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
pressed | boolean | undefined | Estado pressionado (controlled) |
defaultPressed | boolean | false | Estado inicial (uncontrolled) |
onPressedChange | (pressed: boolean) => void | undefined | Callback quando o estado muda |
variant | 'outline' | 'solid' | 'ghost' | 'outline' | Estilo visual — mesmo vocabulário do ToggleGroup |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do botão |
intent | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | undefined | Cor quando pressionado — omitir usa destaque neutro (uso comum: toolbar bold/italic) |
disabled | boolean | false | Desabilita interação |
aria-label | string | undefined | Obrigatório quando o toggle só tem ícone (sem texto visível) |
children* | React.ReactNode | — | Conteúdo do botão (texto, ícone ou ambos) |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
favoritar — icon-only
outline · solid · ghost
cor quando pressionado
sm · md · lg
pressed · unpressed