Toolbar

A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.

import React from 'react';
import { Toolbar, ToolbarIconButton } from '@minddrop/ui';
export const ToolbarDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Toolbar style={{ display: 'flex', padding: 10, width: '100%', minWidth: 'max-content', borderRadius: 6, backgroundColor: 'white', boxShadow: '0px 2px 10px rgba(0 0 0 0.14)', }} >
<ToolbarIconButton icon="cloud-upload" label="Sync" />
<ToolbarIconButton icon="settings" label="Settings" />
<ToolbarIconButton icon="duplicate" label="Open new window" />
</Toolbar>
</div>
);
export default ToolbarDemo;

Features

  • Full keyboard navigation.

Import the component from the @minddrop/ui package.

import { Toolbar, ToolbarIconButton } from '@minddrop/ui';
import {
FormatBold,
FormatItalic,
FormatStrikethrough,
} from '@minddrop/icons';
export default () => {
return (
<Toolbar aria-label="Formatting options">
<ToolbarIconButton label="Bold">
<FormatBold />
</ToolbarIconButton>
<ToolbarIconButton label="Italic">
<FormatItalic />
</ToolbarIconButton>
<ToolbarIconButton label="Strikethrough">
<FormatStrikethrough />
</ToolbarIconButton>
</Toolbar>
);
};

ToolbarProps extends React.HTMLAttributes<HTMLDivElement>.

PropTypeDefault
childrenToolbarIconButtonNo default value
direction'ltr' | 'rtl''ltr'
loopbooleantrue
orientation'horizontal' | 'vertical''horizontal'

Uses roving tabindex to manage focus movement among items.

KeyDescription
TabMoves focus to the first item in the group.
SpaceActivates/deactivates the item.
EnterActivates/deactivates the item.
ArrowDown Moves focus to the next item depending on orientation.
ArrowRight Moves focus to the next item depending on orientation.
ArrowUp Moves focus to the previous item depending on orientation.
ArrowLeft Moves focus to the previous item depending on orientation.
HomeMoves focus to the first item.
EndMoves focus to the last item.