Toggle Button

Name: Nayan UI
Author: Nayan UI

A Toggle Button is a button that stays pressed, for a setting that belongs on a toolbar rather than in a form — bold, italic, mute, pin. It reports its state through its appearance, so a row of them reads as the current formatting.

Demo

Rendered live, with the same build of the library you install.

Icon only:

With a label:

Usage

Source

ToggleButton.tsx

import { useState } from 'react';
import { NToggleButton } from '@nayan-ui/react';
import { Bold, Italic, Underline } from 'lucide-react';

const ToggleButton = () => {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);

  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Icon only:</h3>
      <div className="mb-5 flex flex-wrap items-center gap-2">
        <NToggleButton isIconOnly aria-label="Bold" isSelected={bold} onChange={setBold}>
          <Bold className="h-4 w-4" />
        </NToggleButton>
        <NToggleButton isIconOnly aria-label="Italic" isSelected={italic} onChange={setItalic}>
          <Italic className="h-4 w-4" />
        </NToggleButton>
        <NToggleButton isIconOnly aria-label="Underline" disabled>
          <Underline className="h-4 w-4" />
        </NToggleButton>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">With a label:</h3>
      <div className="flex flex-wrap items-center gap-2">
        <NToggleButton size="sm">Small</NToggleButton>
        <NToggleButton>Medium</NToggleButton>
        <NToggleButton variant="ghost">Ghost</NToggleButton>
      </div>
    </div>
  );
};

export default ToggleButton;

Attributes

11 props

Name	Type	Default	Details
children	ReactNode	Required	The children prop.
isSelected	boolean	Optional	The isSelected prop.
defaultSelected	boolean	false	The defaultSelected prop.
disabled	boolean	false	The disabled prop.
isIconOnly	boolean	false	The isIconOnly prop.
variant	'default' \| 'ghost'	'default'	The variant prop.
size	'sm' \| 'md' \| 'lg'	'md'	The size prop.
onChange	(isSelected: boolean) => void	Optional	The onChange prop.
className	string	''	The className prop.
aria-label	string	Optional	The aria-label prop.
aria-labelledby	string	Optional	The aria-labelledby prop.