Drawer
The Drawer component provides a reusable pattern for drawer in the interface.
Drawer
Note: We've removed the placement of the buttons to prevent issues with documentation. Remove the values from the classList to get the intended layout.
API
| Parameter | Default | Description |
|---|---|---|
|
label
|
Close | What to say in the label of the close drawer button. |
|
screenSizes
|
[] | Show on selected screen sizes. xs,sm,md,lg,xl. |
|
toggleButtonData
|
[] | The data to be passed to the toggle button. If empty no button will be rendered. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-drawer--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-drawer--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-drawer--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |
|
--c-drawer--color--secondary
|
var(--color--secondary) | color | - | Secondary |
|
--c-drawer--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-drawer--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-drawer--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-drawer--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-drawer--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-drawer--color--alpha
|
var(--color--alpha) | rgba | - | Used for overlays. Includes opacity — set both color and alpha together. |