suiss/ui · Component
Alert Sheet
An action sheet that slides up from the bottom of the screen to confirm or choose an action.
Alert Sheet is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.
Alert Sheet is an iOS-style action sheet built on the dialog primitives of the chosen base. An AlertSheet root contains an AlertSheetTrigger and an AlertSheetContent, which renders its own portal and scrim overlay. Inside, an AlertSheetGroup holds an optional AlertSheetHeader (with AlertSheetTitle and AlertSheetDescription) and one or more AlertSheetAction rows. A separate AlertSheetCancel sits below the group.
Use it to offer a short list of actions tied to the current context, especially on touch devices. For a centered confirmation, use Alert Dialog.
Installation
CLI
Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:
Manual
- Install the dependencies and add the
cnhelper:
-
Add the pieces it builds on:
use-scrollbar-gap. -
Copy the source into
components/ui/alert-sheet.tsx:
- Update the import paths to match your project.
Usage
Every sheet needs an AlertSheetTitle for its accessible name. If the title should not be visible, hide it with className="sr-only".
By default the sheet is dismissible and behaves like a regular dialog. Set dismissible={false} to render it as an alert dialog instead.
When the sheet opens, focus moves to AlertSheetCancel unless you pass your own initialFocus to AlertSheetContent. Every action and the cancel button close the sheet. Control the open state with open and onOpenChange, or use defaultOpen.
Examples
With title
Shows a visible title above the description.
Multiple actions
Offers a default and a destructive action in one group.
Not dismissible
With dismissible={false} the sheet is an alert dialog: pressing outside does not close it, so one of the choices has to be made.
API Reference
AlertSheet
The root that manages the open state and dismissal behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
dismissible | boolean | true | When true, renders as a dialog; when false, renders as an alert dialog. |
Also accepts the props of the primitive part it wraps.
AlertSheetTrigger
The control that opens the sheet.
Also accepts the props of the primitive part it wraps.
AlertSheetPortal
Renders the sheet into a portal outside the DOM hierarchy.
Also accepts the props of the primitive part it wraps.
AlertSheetOverlay
The full-screen scrim behind the sheet.
Also accepts the props of the primitive part it wraps.
AlertSheetContent
The bottom-anchored container, rendered with its own portal and overlay.
Also accepts the props of the primitive part it wraps.
AlertSheetGroup
A rounded surface that stacks the header and actions with dividers.
Also accepts the props of React.ComponentProps<"div">.
AlertSheetHeader
A padded wrapper for the title and description.
Also accepts the props of React.ComponentProps<"div">.
AlertSheetTitle
The heading that names the sheet.
Also accepts the props of the primitive part it wraps.
AlertSheetDescription
Supporting text that describes the sheet.
Also accepts the props of the primitive part it wraps.
AlertSheetAction
A full-width row button that performs an action and closes the sheet.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | Text color of the action. default uses text-primary; destructive uses text-destructive. |
Also accepts the props of the primitive part it wraps.
AlertSheetCancel
A separate, bold button that dismisses the sheet.
Also accepts the props of the primitive part it wraps.
Accessibility
- With
dismissible(the default) the popup has thedialogrole; withdismissible={false}it has thealertdialogrole. - The popup is named by
AlertSheetTitleand described byAlertSheetDescription. - Focus moves to the cancel button on open and returns to the trigger on close.
Escapecloses the sheet.
Notes
- Styling hooks:
data-slotvalues fromalert-sheetthroughalert-sheet-cancel. - The sheet slides up from
translate-y-fullas it opens and back down as it closes, and its bottom padding respectsenv(safe-area-inset-bottom). - When an action contains an icon, the group switches to a grid so icons and labels align across rows.
AlertSheet presents a set of choices related to the current context. AlertSheetContent renders through a portal (inside a full-window overlay on iOS), slides up from the bottom over a dimmed scrim, and respects the safe-area insets.
Actions sit in an AlertSheetGroup, a rounded card that draws a hairline between each child, and AlertSheetCancel sits below it as its own card with bold text. Use it for two to a few actions; for a single decision that needs confirmation, use Alert Dialog.
