Documentation
Toolbar

Toolbar

Example

import { Toolbar } from '@i4o/catalystui'
import {
	FontBoldIcon,
	FontItalicIcon,
	UnderlineIcon,
	TextAlignLeftIcon,
	TextAlignCenterIcon,
	TextAlignRightIcon,
} from '@radix-ui/react-icons'
 
export default () => {
	return (
		<Toolbar
			className='w-full'
			items={[
				{
					type: 'toggle-group',
					groupItems: [
						{
							id: 'bold',
							icon: <FontBoldIcon />,
						},
						{
							id: 'italic',
							icon: <FontItalicIcon />,
						},
						{
							id: 'underline',
							icon: <UnderlineIcon />,
						},
					],
					groupType: 'multiple',
				},
				{
					type: 'separator',
				},
				{
					type: 'toggle-group',
					groupItems: [
						{
							id: 'left',
							icon: <TextAlignLeftIcon />,
						},
						{
							id: 'center',
							icon: <TextAlignCenterIcon />,
						},
						{
							id: 'right',
							icon: <TextAlignRightIcon />,
						},
					],
					groupType: 'single',
				},
				{
					type: 'separator',
				},
				{
					type: 'link',
					link: '/',
					linkText: 'Edited 2 hours ago',
				},
				{
					type: 'button',
					buttonText: 'Share',
				},
			]}
		/>
	)
}

Props

NameTypeDefaultDescription
classNamestring
itemsToolbarItem

ToolbarItem

NameTypeDefaultDescription
buttonOnSelect() => voidFunction to execute when a button is clicked. Use when type is button.
buttonTextstringText inside the button. Use when type is button
groupTypesingle | multipleIf multiple toggles can be enabled at once. Use when type is toggle-group
groupItemsToggleGroupItem[]List of items in a toggle group. Use when type is toggle-group
linkstringURL of the link. Use when type is link
linkTextstringText of the link. Use when type is link
typetoggle-group | separator | link | buttonText of the link. Use when type is link