Mushilu-San UI Bottom sheet
A panel that rises from the bottom of the screen, within easy reach on a phone.
Selector: mui-bottom-sheet
import { BottomSheet } from '@mushilu-san/ui/mobile';Loading example…
Overview
open is a two-way model. It has a drag handle by default (showHandle), closes on the backdrop and Escape unless those are turned off, and returns focus to its trigger on close.
heading and is aria-modal, so it behaves like a dialog for assistive technology.
When to use
Choosing among actions for one item on a phone, such as "Share" or "Move to folder". A short form or filter that should stay close to the thumb.
Guidelines
Do
Give the sheet a heading that names the item or the action set. Keep actions to about five or fewer.
Don't
Do not nest a bottom sheet inside another sheet or dialog.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
panel | dialog (modal) | aria-modal="true", named by heading. |
handle | — | aria-hidden). Dragging is a convenience, not the only way to close. |
close button | button |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| Escape | closeOnEscape is on (default). |
Every action must be reachable with a keyboard, not only by swiping.
API
BottomSheet
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | undefined | — | Optional heading — wires up aria-labelledby when present. |
size | 'sm' | 'md' | 'lg' | 'full' | 'md' | Sheet height preset. |
showHandle | boolean | true | Show the drag-handle affordance at the top of the sheet. Accepts attribute presence, e.g. <… showHandle>. |
closeOnBackdrop | boolean | true | Closes the sheet when the backdrop is tapped. Default `true`. Accepts attribute presence, e.g. <… closeOnBackdrop>. |
closeOnEscape | boolean | true | Closes the sheet on Escape. Default `true`. Accepts attribute presence, e.g. <… closeOnEscape>. |
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way open state. |
| Name | Type | Description |
|---|---|---|
opened | void | Emits when the sheet opens. |
closed | void | Emits when the sheet closes, however it was closed. |
CSS parts
::part(body)::part(close)::part(footer)::part(handle)::part(header)::part(panel)::part(root)::part(surface)::part(title)
Tokens
--mui-color-surface-raised--mui-color-border--mui-shadow-5--mui-z-modal--mui-radius-md--mui-touch-target