Toolbar

A Toolbar groups the controls that act on the thing below it and makes them one stop on the keyboard: arrow keys move between the controls, so a row of buttons is reached with one Tab rather than several. It can be laid out in a row or a column, joined or spaced.

Demo

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

Usage

Source
Toolbar.tsx
import { useState } from 'react';
import { NToggleButton, NToolbar } from '@nayan-ui/react';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';


const Toolbar = () => {
  const [align, setAlign] = useState('left');


  return (
    <div>
      <NToolbar aria-label="Text alignment">
        <NToggleButton isIconOnly aria-label="Align left" isSelected={align === 'left'} onChange={() => setAlign('left')}>
          <AlignLeft className="h-4 w-4" />
        </NToggleButton>
        <NToggleButton isIconOnly aria-label="Align centre" isSelected={align === 'center'} onChange={() => setAlign('center')}>
          <AlignCenter className="h-4 w-4" />
        </NToggleButton>
        <NToggleButton isIconOnly aria-label="Align right" isSelected={align === 'right'} onChange={() => setAlign('right')}>
          <AlignRight className="h-4 w-4" />
        </NToggleButton>
      </NToolbar>
    </div>
  );
};


export default Toolbar;

Attributes

5 props
NameTypeDefaultDetails
childrenReactNodeRequiredThe children prop.
orientation'horizontal' | 'vertical''horizontal'The orientation prop.
isAttachedbooleanfalseJoins the controls into one segmented strip.
classNamestring''The className prop.
aria-labelstring'Toolbar'The aria-label prop.

Tags

Other components solving nearby problems.