ActionBar

<caos-action-bar>

primary and secondary actions for a surface, with an overflow affordance

May be placed on a record page, an app’s home page and a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
framed	framed, markup only	Draw the bar as a surface of its own — border, radius, filled background and inset padding — for a bar docked above a table or under a form. Without it the bar is transparent and only aligns what it holds.	boolean	false	Optional

Events

This piece raises no events.

Slots

Name	What goes in it
the default slot	The inline action controls — Buttons — pushed to the trailing edge of the row.
start	Context on the leading edge, in muted text: a title, “3 selected”, a filter summary. The region collapses when nothing is in it.
overflow	An OverflowMenu, drawn after the inline actions, holding the ones that did not earn a place in the row.

Styling hooks

Design token	What it controls
--caos-space-3	The gap between the start region and the action cluster.
--caos-space-2	The gap between adjacent action controls.
--caos-color-surface	The fill of the framed variant.
--caos-color-border	The border of the framed variant.
--caos-radius	The corner radius of the framed variant.
--caos-color-text-muted	The ink of whatever is put in the start region.
--caos-font	The typeface of the start region.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(bar)	the toolbar itself	Always
::part(start)	the leading group, before the gap	Always
::part(actions)	the trailing group of controls	Always

When to use it

A surface has more than one action and they belong together as a group — typically one primary and one or two secondary, with the rest behind an overflow.

What to use instead

• Button — There is only ONE action. A bar around a single button adds a row, a gap and a toolbar role for nothing. Note that this piece never replaces Button — it holds them.
• OverflowMenu — Every action is secondary and none of them earns space in the row. That one collapses the whole set behind a single trigger; this one lays a set out in the open. They are usually used together — the menu goes in this bar’s overflow slot.
• PageHeader — The actions belong to the page as a whole and sit beside its title. That one has an actions slot of its own, so a bar underneath it would repeat the row.
• SegmentedFilter — The row changes WHAT IS SHOWN rather than doing something.

Accessibility

The row is marked as a role="toolbar" and carries a name, so assistive technology announces a group of related controls rather than loose buttons, and the start and action regions disappear from the layout when empty. Left to the author: the controls themselves. A toolbar does not give its buttons names, does not manage focus between them — each button is its own Tab stop — and does not decide which is primary. Give the bar an aria-label saying what its actions act on; the toolbar follows it whenever it changes, and is named “Actions” without one.

Examples

A primary action and its neighbours

The plain bar in open page space: context on the left, the action cluster pushed to the right with one primary among them.

{
  "id": "example",
  "section": "A primary action and its neighbours",
  "columns": 1,
  "items": [
    {
      "id": "action_bar_1",
      "type": "component",
      "key": "action_bar",
      "children": [
        {
          "id": "tag_2",
          "type": "component",
          "key": "tag",
          "slot": "start",
          "children": [
            "3 selected"
          ]
        },
        {
          "id": "button_3",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "secondary"
          },
          "children": [
            "Clone"
          ]
        },
        {
          "id": "button_4",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "primary"
          },
          "children": [
            "Submit"
          ]
        }
      ]
    }
  ]
}

<caos-action-bar>
  <caos-tag slot="start">3 selected</caos-tag>
  <caos-button variant="secondary">Clone</caos-button>
  <caos-button variant="primary">Submit</caos-button>
</caos-action-bar>

Docked and framed

The same row given an edge of its own — the variant for a bar that sits hard against a table or a form rather than floating in page space.

{
  "id": "example",
  "section": "Docked and framed",
  "columns": 1,
  "items": [
    {
      "id": "action_bar_1",
      "type": "component",
      "key": "action_bar",
      "inputs": {
        "framed": true
      },
      "children": [
        {
          "id": "button_2",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "secondary"
          },
          "children": [
            "Cancel"
          ]
        },
        {
          "id": "button_3",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "primary"
          },
          "children": [
            "Save record"
          ]
        }
      ]
    }
  ]
}

<caos-action-bar framed>
  <caos-button variant="secondary">Cancel</caos-button>
  <caos-button variant="primary">Save record</caos-button>
</caos-action-bar>

With the rest behind a trigger

Two actions in the open and four behind the overflow slot — the pairing this bar is shaped for, and the reason the slot is called overflow rather than more.

{
  "id": "example",
  "section": "With the rest behind a trigger",
  "columns": 1,
  "items": [
    {
      "id": "action_bar_1",
      "type": "component",
      "key": "action_bar",
      "inputs": {
        "framed": true
      },
      "children": [
        {
          "id": "button_2",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "secondary"
          },
          "children": [
            "Clone"
          ]
        },
        {
          "id": "button_3",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "primary"
          },
          "children": [
            "Submit"
          ]
        },
        {
          "id": "overflow_menu_4",
          "type": "component",
          "key": "overflow_menu",
          "inputs": {
            "label": "More record actions",
            "items": [
              {
                "value": "export",
                "label": "Export as PDF"
              },
              {
                "value": "share",
                "label": "Share with the account"
              },
              {
                "value": "revise",
                "label": "Start a revision"
              },
              {
                "value": "delete",
                "label": "Delete record",
                "danger": true
              }
            ]
          },
          "slot": "overflow"
        }
      ]
    }
  ]
}

<caos-action-bar framed>
  <caos-button variant="secondary">Clone</caos-button>
  <caos-button variant="primary">Submit</caos-button>
  <caos-overflow-menu id="actionBar1overflowMenu3" slot="overflow" label="More record actions"></caos-overflow-menu>
</caos-action-bar>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const actionBar1overflowMenu3 = document.getElementById('actionBar1overflowMenu3');
actionBar1overflowMenu3.items = [
  {
    "value": "export",
    "label": "Export as PDF"
  },
  {
    "value": "share",
    "label": "Share with the account"
  },
  {
    "value": "revise",
    "label": "Start a revision"
  },
  {
    "value": "delete",
    "label": "Delete record",
    "danger": true
  }
];