Interactive demo — tweak the ControlBar props below

Palette
Bordered
Rounded
Header

Composition — Selector, Slider, Input, SearchField, Switch, Button

Display settings
Layout
Columns
Opacity
60
Search
Notifications

ControlBar with header — color dots via Button

Selected color: #4a90d9

Color

Svelte 
<!-- ControlBar is a generic container. Drop any control inside. -->
<ControlBar palette="tone">
    <Selector label="Layout"  options={["grid", "list", "tile"]} bind:value={layout} />
    <Selector label="Columns" options={[2, 3, 4]} bind:value={cols} />
</ControlBar>

PropTypeDefault
leadingSnippet—
childrenSnippet—
palette"accent" | "tone" | "accentbg""tone"
roundedbooleanfalse
borderedbooleantrue
Prop leading
Type Snippet
Default —
Prop children
Type Snippet
Default —
Prop palette
Type "accent" | "tone" | "accentbg"
Default "tone"
Prop rounded
Type boolean
Default false
Prop bordered
Type boolean
Default true