@f-ewald/components

Documentation / action-bar

Component API

<action-bar>

Open live example

Toolbar that sits directly above a list or table: a left cluster for
search and filters and a right cluster for record actions (create, delete,
bulk actions). It's a presentational layout container only — drop any
controls (autocomplete-input, multi-select, ui-button, …) into the
start and end slots; the bar owns none of their behavior and adds no
search field of its own. The two clusters wrap onto separate rows when the
bar is too narrow.

Install

import "@f-ewald/components/action-bar.js";

Usage

<action-bar>
  <autocomplete-input slot="start" placeholder="Search…"></autocomplete-input>
  <ui-button slot="end" variant="secondary">Delete</ui-button>
  <ui-button slot="end" variant="primary">Create</ui-button>
</action-bar>

Attributes / properties

None.

Events

None.

Slots

None.

CSS custom properties

None.