Toolbar

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

## Installation

React

npx @galaxy-stack/nebula-cli add toolbar

Vue

npx @galaxy-stack/nebula-cli add toolbar

Angular

npx @galaxy-stack/nebula-cli add toolbar

global

# If you have installed galaxy-design globally
galaxy-design add toolbar

Usage

React

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarLink,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from '@/components/toolbar'

export default function ToolbarDemo() {
  return (
    <Toolbar>
      <ToolbarButton>Undo</ToolbarButton>
      <ToolbarButton>Redo</ToolbarButton>
      <ToolbarSeparator />
      <ToolbarToggleGroup type="single">
        <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
        <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem>
      </ToolbarToggleGroup>
    </Toolbar>
  )
}

API Reference

Toolbar Props

Prop	Type	Default	Description	Frameworks
orientation	'horizontal' | 'vertical'	'horizontal'	Toolbar orientation	All
dir	'ltr' | 'rtl'	'ltr'	Reading direction for roving focus	All
loop	boolean	true	Loop keyboard focus from last to first	All
className	string	''	CSS class names for toolbar root	All
children	ReactNode	-	Toolbar content	All

ToolbarButton Props

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
disabled	boolean	false	Disables the button	All
className	string	''	CSS class names	All

ToolbarSeparator Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	All

ToolbarToggleGroup Props

Prop	Type	Default	Description	Frameworks
type	'single' | 'multiple'	-	Toggle type	All
className	string	''	CSS class names	All

ToolbarToggleItem Props

Prop	Type	Default	Description	Frameworks
value	string	-	Toggle item value	All
disabled	boolean	false	Disables the item	All
className	string	''	CSS class names	All

Components

• Toolbar - Main toolbar container
• ToolbarButton - Clickable button
• ToolbarSeparator - Visual separator
• ToolbarLink - Link button
• ToolbarToggleGroup - Group of toggle items
• ToolbarToggleItem - Individual toggle button

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)