Visão geral

O Toggle é visualmente um botão mas semanticamente um interruptor (pressed/not pressed). Tem variantes e tamanhos idênticos ao Button.

Variantes

Com ícones (formatação)

Import

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

Tamanhos

O Toggle usa os mesmos tamanhos que o Button.

default

Padrão de implementação

Snippets para uso do Toggle.

Toggle controlado

"use client"
import { useState } from "react"
import { Toggle } from "@/components/ui/toggle"
import { BoldIcon } from "lucide-react"

export function FormatToggle() {
  const [bold, setBold] = useState(false)

  return (
    <Toggle
      pressed={bold}
      onPressedChange={setBold}
      aria-label="Negrito"
    >
      <BoldIcon />
    </Toggle>
  )
}

Toggle de filtro

<Toggle
  variant="outline"
  pressed={filtroAtivo}
  onPressedChange={setFiltroAtivo}
>
  Apenas ativos
</Toggle>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter