Actionbar

<dsx-actionbar> — Actionbar

Horizontal or vertical layout shell for page-level actions.

Live Preview

Import

import '@bnotk/dsx/components/actionbar.js';

Usage

<dsx-actionbar sticky>
  <div slot="left">
    <h2>Register data update</h2>
  </div>
  <button slot="right" type="button">Cancel</button>
  <button type="button">Save draft</button>
  <button type="button">Publish</button>
</dsx-actionbar>

Elements

<dsx-actionbar>

Simple flex container with separate left and right/default action regions.

Properties

Property	Type	Default	Description
orientation	’horizontal’ | ‘vertical'	'horizontal’	Switches between top bar and side rail layouts.
sticky	boolean	false	Makes the host position: sticky; top: 0.

Methods

None.

Events

None.

Slots

Slot	Description
left	Left-aligned content in horizontal mode, top-aligned in vertical mode.
right	Right-aligned content. Rendered before the default slot inside the right region.
default	Additional right-region content.

CSS Parts

This element does not expose shadow parts.

Notes

• In vertical mode the host becomes a column, drops the bottom border, and adds a right border instead.
• The right region gets margin-left: auto in horizontal mode to push actions to the end.

Behavior Notes

• There is no internal interaction logic; the component is purely structural.
• Default height is driven by --ds2-actionbar-height in horizontal mode.

Styling Notes

• Surface is white with a stronger grey divider and 1.5rem horizontal padding.
• Sticky state uses --ds2-z-sticky.