Netzo Logo

toggle

A two-state button that can be either on or off.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import { Toggle, toggleVariants } from 'netzo/components/toggle.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { Toggle } from "netzo/components/toggle.tsx";

export default () => {
  return (
    <Toggle aria-label="Toggle italic">
      <i className="mdi-format-bold h-4 w-4" />
    </Toggle>
  );
};

Disabled

import { Toggle } from "netzo/components/toggle.tsx";

export default () => {
  return (
    <Toggle aria-label="Toggle italic" disabled>
      <i className="mdi-format-underline h-4 w-4" />
    </Toggle>
  );
};

Large

import { Toggle } from "netzo/components/toggle.tsx";

export default () => {
  return (
    <Toggle size="lg" aria-label="Toggle italic">
      <i className="mdi-format-italic h-4 w-4" />
    </Toggle>
  );
};

Outline

import { Toggle } from "netzo/components/toggle.tsx";

export default () => {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <i className="mdi-format-italic h-4 w-4" />
    </Toggle>
  );
};

Small

import { Toggle } from "netzo/components/toggle.tsx";

export default () => {
  return (
    <Toggle size="sm" aria-label="Toggle italic">
      <i className="mdi-format-italic h-4 w-4" />
    </Toggle>
  );
};

With Text

import { Toggle } from "netzo/components/toggle.tsx";

export default () => {
  return (
    <Toggle aria-label="Toggle italic">
      <i className="mdi-format-italic mr-2 h-4 w-4" />
      Italic
    </Toggle>
  );
};