Storybook
-
Theme
-
Light
-
Dark
-
System
-
Light tone
-
Light
-
Light high contrast
-
Light colorblind
-
Light Tritanopia
-
Dark tone
-
Dark
-
Dark dimmed
-
Dark high contrast
-
Dark colorblind
-
Dark Tritanopia
-
Reset to default
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
Dialog
Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.
-
Documentation
- dialog
Basic
Body message
Header title (contains close button)
Title
Body message
Header, rows and footer
Title
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
Row 17
Row 18
Row 19
Row 20
Footer
Backdrop
Title
Body message
Strong backdrop
Title
Body message
Light backdrop, fast
Title
Body message
Backdrop, light tint
Title
Body message
Strong backdrop, light tint
Title
Body message
Transition duration
Title
Body message
Modal dialog
A modal dialog can still be closed using the Escape key, unless
is_escapable is false.
Title
Body message
Modal dialog, not escapable
Title
Body message
Narrow dialog
Title
Body message
Wide dialog
Title
Body message
Max width and height
Title
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Cancel Delete buttons (modal)
Delete issue?
Are you sure you'd like to delete this issue?
Open multiple, escapable
When both dialogs are open, the dialogs can be closed one by one by pressing Escape.
Accept terms of service
This is the updated terms of service
Are you sure you want to decline?
Focus specific element after opening
Gives focus to the specified element after opening the dialog.
Title
Focus originating button after closing
Returns focus to the originating element after closing the dialog. You can test this by pressing Enter after the dialog has closed.
Body message
Keeping form state
Selected: -
Conditional dialog (with route)
Conditional dialog (with cancel button)
Function
cancel_dialog requires that attribute on_cancel is set.
Conditional dialog (with route, custom transition_duration)
Conditional dialog (show on mount)
With attr
is_show_on_mount, the dialog is displayed without a fade-in transition. Conditional display can be controlled using Phoenix's :if={} attribute. Additional logic is provided by PrimerLive.StatefulConditionComponent. To see this in action: click the "Create post" button, then reload the page to see the dialog appear immediately.
Status callback events
Status: initial
Body
-
On this page
- Top of page
- Documentation
-
Stories
- Basic
- With links
- Header title (contains close button)
- Header, rows and footer
- Backdrop
- Strong backdrop
- Light backdrop, fast
- Backdrop, light tint
- Strong backdrop, light tint
- Transition duration
- Modal dialog
- Modal dialog, not escapable
- Narrow dialog
- Wide dialog
- Max width and height
- Cancel Delete buttons (modal)
- Open multiple, escapable
- Focus specific element after opening
- Focus originating button after closing
- Keeping form state
- Conditional dialog (with route)
- Conditional dialog (with cancel button)
- Conditional dialog (with route, custom transition_duration)
- Conditional dialog (show on mount)
- Status callback events
- Top of page