Primer / Live
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

Dialog

Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.

Basic

Body message

With links

Header title (contains close button)

Title

Body message

Header, rows and 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.

Modal dialog, not escapable

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

Interactive
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