Toggle

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

import { LuBold } from "react-icons/lu";
import { css } from "styled-system/css";
import { Toggle } from "@/components/ui/toggle";

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

Installation

npx nore-ui-cli@latest add toggle

Usage

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

<Toggle>Toggle</Toggle>

Examples

Outline

import { LuItalic } from "react-icons/lu";
import { css } from "styled-system/css";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <LuItalic className={css({ w: "4", h: "4" })} />
    </Toggle>
  );
}

Size

import { LuItalic } from "react-icons/lu";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleSize() {
  return (
    <styled.div css={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "4" }}>
      <Toggle variant="outline" size="sm" aria-label="Toggle italic">
        <LuItalic className={css({ w: "4", h: "4" })} />
      </Toggle>
      <Toggle variant="outline" size="md" aria-label="Toggle italic">
        <LuItalic className={css({ w: "4", h: "4" })} />
      </Toggle>
      <Toggle variant="outline" size="lg" aria-label="Toggle italic">
        <LuItalic className={css({ w: "4", h: "4" })} />
      </Toggle>
    </styled.div>
  );
}

Disabled

import { LuUnderline } from "react-icons/lu";
import { css } from "styled-system/css";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleDisabled() {
  return (
    <Toggle aria-label="Toggle underline" disabled>
      <LuUnderline className={css({ w: "4", h: "4" })} />
    </Toggle>
  );
}