Toggle

import { Toggle } from "@t2-educacao/midas";

UsoCopy Anchor Link

import { TextB } from "@t2-educacao/midas/icons";

<Toggle aria-label="Negrito">
  <TextB />
</Toggle>

PropsCopy Anchor Link

Aceita as props do Toggle do Radix mais:

VariantesCopy Anchor Link

ExemplosCopy Anchor Link

Com textoCopy Anchor Link

import { Star } from "@t2-educacao/midas/icons";

<Toggle variant="outline">
  <Star /> Favorito
</Toggle>

ControladoCopy Anchor Link

const [favorito, setFavorito] = useState(false);

<Toggle pressed={favorito} onPressedChange={setFavorito} aria-label="Favoritar curso">
  <Star weight={favorito ? "fill" : "regular"} />
</Toggle>

Para vários toggles relacionados, use ToggleGroup.

AcessibilidadeCopy Anchor Link

• Usa aria-pressed para anunciar o estado.
• Toggle só com ícone exige aria-label.
• O rótulo descreve a ação, não o estado ("Negrito", não "Negrito ativado").

Não façaCopy Anchor Link

• Usar Toggle para ações que não têm estado (ex.: "Enviar"): use Button.
• Usar Toggle em formulários de configuração: prefira Switch ou Checkbox.