Drawer
2026.1
Requires Celeste 2026.1
Properties
| Prop | Description |
|---|---|
id |
Required, a unique ID for this Drawer |
size |
Size variant; sm, base (default), lg and xl are valid values |
Slots
| Prop | Description |
|---|---|
trigger |
Optional, provide your own trigger button |
close |
Optional, provide your own close button |
Click Handlers
There are 3 shorthand click handlers included, for convinience.
| Prop | Description |
|---|---|
@drawer.toggle |
Toggle the drawer on click, works inside the trigger slot |
@drawer.open |
Open the drawer on click, works inside the trigger slot |
@drawer.close |
Close the drawer on click, works inside the close slot |
How to use it
<Drawer id="drawer">
<!-- Optional, provide your own trigger, be sure to include the click handler -->
<Slot name="trigger">
<button type="button" @drawer.open>Open</button>
</Slot>
<!-- Optional, provide your own close button, be sure to include the click handler -->
<Slot name="close">
<button type="button" @drawer.close>Be gone!</button>
</Slot>
<div class="px-xl py-lg">Just hidden things</div>
</Drawer>