Toolbar
Arrange related controls in a keyboard-accessible toolbar.
Preview
Import
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, ToolbarLink } from "@sigil-ui/components";Usage
<Toolbar>
<ToolbarButton>Bold</ToolbarButton>
<ToolbarButton>Italic</ToolbarButton>
<ToolbarSeparator />
<ToolbarButton>Link</ToolbarButton>
</Toolbar>Sub-components
This component includes the following parts:
<ToolbarButton><ToolbarSeparator><ToolbarToggleGroup><ToolbarToggleItem><ToolbarLink>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-border | Border |
--s-surface | Surface |
--s-radius-sm | Radius sm |
--s-text | Text |
--s-duration-fast | Duration fast |
--s-surface-elevated | Surface elevated |
--s-primary | Primary |
--s-text-muted | Text muted |