Toolbar

A control bar (.casca-toolbar) for the buttons, chips, and switches above a chart or table. Group related controls with .casca-toolbar-group. It wraps to multiple rows by default; data-align distributes the groups and data-variant="scroll" keeps everything on one scrolling row.

Default (wraps)

Filter Sort
✓ Synced Export 
<div class="casca-toolbar">
  <div class="casca-toolbar-group"> ...controls... </div>
  <div class="casca-toolbar-group"> ...actions... </div>
</div>

data-align="between"

Pushes the first and last groups to opposite ends.

Live ✓ Synced
Export 
<div class="casca-toolbar" data-align="between"> ... </div>

data-align="end"

Aligns every group to the trailing edge.

Filter Export 
<div class="casca-toolbar" data-align="end"> ... </div>

data-variant="scroll"

Stays one row and scrolls horizontally instead of wrapping. Useful for many tags on narrow screens.

Marketing Sales Support Finance Product Ops Legal 
<div class="casca-toolbar" data-variant="scroll"> ...many chips... </div>

See it assembled →