A horizontal bar for grouping action buttons and controls with optional left and right sections. Toolbar organizes...

A horizontal bar for grouping action buttons and controls with optional left and right sections. Toolbar organizes related controls into logical left and right regions, common in data tables, filtering interfaces, and application toolbars. Use toolbar to maintain consistent spacing and alignment of controls like buttons, select fields, and pagination. Use toolbar when: - Grouping filter controls, sort options, and view toggles together - Creating consistent spacing between related actions - Building table toolbars with actions on both sides - Responsive layouts need controls to stack on small screens Composition: - Place controls in the `left` slot for primary or filter controls - Place controls in the `right` slot for secondary or action controls - The responsive variant stacks left/right sections vertically on small screens

<ed-toolbar></ed-toolbar>

Properties

Name Type Default Description
behavior String 'responsive' A horizontal bar for grouping action buttons and controls with optional left and right sections. Toolbar organizes related controls into logical left and right regions, common in data tables, filtering interfaces, and application toolbars. Use toolbar to maintain consistent spacing and alignment of controls like buttons, select fields, and pagination. Use toolbar when: - Grouping filter controls, sort options, and view toggles together - Creating consistent spacing between related actions - Building table toolbars with actions on both sides - Responsive layouts need controls to stack on small screens Composition: - Place controls in the `left` slot for primary or filter controls - Place controls in the `right` slot for secondary or action controls - The responsive variant stacks left/right sections vertically on small screens / export class EdToolbar extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Behavioral variants <ed-text-passage size="sm"> <ul> <li>**responsive** Stacks left and right sections vertically on small screens and displays horizontally on larger screens</li> </ul> </ed-text-passage>
align String 'center' Horizontal alignment variants <ed-text-passage size="sm"> <ul> <li> **center** horizontally centers the content within toolbar</li> </ul> </ed-text-passage>

Slots

Name Description
left Controls positioned on the left side of the toolbar
right Controls positioned on the right side of the toolbar

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/toolbar/toolbar.ts