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

Name	Type	Default	Description
className	string
items	ToolbarItem

ToolbarItem

Name	Type	Description
buttonOnSelect	`() => void`	Function to execute when a button is clicked. Use when `type` is `button`.
buttonText	`string`	Text inside the button. Use when `type` is `button`
groupType	`single \| multiple`	If multiple toggles can be enabled at once. Use when `type` is `toggle-group`
groupItems	`ToggleGroupItem[]`	List of items in a toggle group. Use when `type` is `toggle-group`
link	`string`	URL of the link. Use when `type` is `link`
linkText	`string`	Text of the link. Use when `type` is `link`
type	`toggle-group \| separator \| link \| button`	Text of the link. Use when `type` is `link`

Toggle Group Tooltip