Blips
Documentação

Toggle

Um botão de dois estados que pode estar ligado ou desligado.

Carregando…
"use client";

import { Toggle } from "@blips/ui/components/toggle";
import { TextB } from "@phosphor-icons/react";

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <TextB className="h-4 w-4" />
    </Toggle>
  );
}

Instalação

pnpm add @blips/ui

Uso

import { Toggle } from "@blips/ui/components/toggle"
<Toggle>Toggle</Toggle>

Exemplos

Outline

Use variant="outline" para um estilo com contorno.

Carregando…
import { Toggle } from "@blips/ui/components/toggle";
import { TextItalic } from "@phosphor-icons/react";

export default function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <TextItalic />
    </Toggle>
  );
}

Desabilitado

Carregando…
import { Toggle } from "@blips/ui/components/toggle";
import { TextUnderline } from "@phosphor-icons/react";

export default function ToggleDisabled() {
  return (
    <Toggle aria-label="Toggle italic" disabled>
      <TextUnderline className="h-4 w-4" />
    </Toggle>
  );
}

Referência da API

Consulte a documentação do Radix Toggle.

AnteriorTextareaPróximoToggle Group