Primitiveaction

Toggle

Stable

Botão que permanece pressionado. Base UI Toggle fornece o comportamento e o Button do Up Web DS fornece a forma, então um toggle é um botão por construção, não por semelhança. `variant` fica restrito a ghost e outline — as duas que descrevem um controle com estado ligado.

Instalação

npx up-web-ds add toggle

Preview

Default

Pressed

Variants

Sizes

Icon Only

Disabled

Filter Bar

Mostrando: Stable.

All states

Default

Pressed

Variants

Sizes

Icon Only

Disabled

Filter Bar

Mostrando: Stable.

Usage

@/components/ui/toggle

import { Toggle } from '@/components/ui/toggle'

Toggle

<Toggle>Mostrar restritos</Toggle>

Props

Props de Toggle
Prop	Type	Default	Description
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	`'default'`
variant	`"outline" \| "ghost"`	`'ghost'`
className	`string \| ((state: ToggleState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
defaultPressed	`boolean`	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
onPressedChange	`((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void)`	sem valor padrão	Callback fired when the pressed state is changed.
pressed	`boolean`	sem valor padrão	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ToggleState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ToggleState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.
value	`string`	sem valor padrão	A unique string that identifies the toggle when used inside a toggle group.

Estende TogglePrimitive.Props. Aceita também os atributos padrão de um elemento React (283 não listados).

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: alcançável por Tab, Space e Enter alternam, e o estado é reportado por aria-pressed em vez de depender só da cor. Um toggle desabilitado sai da sequência de tabulação e recusa a alternância mantendo o estado anunciado. Touch verificado em viewport de 375px com emulação de toque: 36x36 no size default e 32x32 no sm, acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8. Reduced motion verificado com prefers-reduced-motion: reduce — as transições herdadas do Button colapsam para 1ms e o deslocamento de 1px do estado ativo não é animado.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: action
Status: Stable

Origem e distribuição

Fonte: shadcn registry / toggle
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/toggle.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: @base-ui/react, class-variance-authority
Ícones: Nenhum
Construído sobre: Button
Usado por: Toggle Group