eo-n/ui

import { Heart } from "lucide-react";
 
import { Toggle } from "@/components/ui/toggle";
 
export function ToogleDemo() {
  return (
    <Toggle aria-label="Toggle like">
      <Heart className="size-4" />
    </Toggle>
  );
}

Installation

npx shadcn@latest add @eo-n/toggle

Usage

Import all parts and piece them together.

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

<Toggle>Press</Toggle>

Examples

Default

import { Heart } from "lucide-react";
 
import { Toggle } from "@/components/ui/toggle";
 
export function ToogleDemo() {
  return (
    <Toggle aria-label="Toggle like">
      <Heart className="size-4" />
    </Toggle>
  );
}

Outline

import { Bold } from "lucide-react";
 
import { Toggle } from "@/components/ui/toggle";
 
export function ToogleOutline() {
  return (
    <Toggle aria-label="Toggle font weight" variant="outline">
      <Bold className="size-4" />
    </Toggle>
  );
}

Large

import { Italic } from "lucide-react";
 
import { Toggle } from "@/components/ui/toggle";
 
export function ToogleLarge() {
  return (
    <Toggle aria-label="Toggle italic" variant="outline" size="lg">
      <Italic className="size-4" />
    </Toggle>
  );
}

Small

import { Italic } from "lucide-react";
 
import { Toggle } from "@/components/ui/toggle";
 
export function ToogleSmall() {
  return (
    <Toggle aria-label="Toggle italic" variant="outline" size="sm">
      <Italic className="size-4" />
    </Toggle>
  );
}

Disabled

import { Italic } from "lucide-react";
 
import { Toggle } from "@/components/ui/toggle";
 
export function ToogleDisabled() {
  return (
    <Toggle aria-label="Toggle italic" variant="outline" disabled>
      <Italic className="size-4" />
    </Toggle>
  );
}

Toggle

On this page