This is a basic modal with default header styling.
Your operation has been completed successfully!
Here's some important information you should know before proceeding.
This action may have consequences. Please review before continuing.
An error occurred while processing your request. Please try again.
<.modal id="modal-header-types-default" description="A standard modal with default header styling" title="Default Modal" header_type="default" header_size="large" > <:trigger :let={attrs}> <.button label="Default Modal" {attrs} /> </:trigger> <p>This is a basic modal with default header styling.</p> <:footer> <.modal_footer> <:action> <.button label="Cancel" variant="secondary" /> </:action> <:action> <.button label="Confirm" /> </:action> </.modal_footer> </:footer> </.modal> <.modal id="modal-header-types-icon" description="Modal with custom icon in header" title="Custom Icon Modal" header_type="icon" header_size="large" > <:trigger :let={attrs}> <.button label="Icon Modal" {attrs} /> </:trigger> <:header_icon> <.mail /> </:header_icon> <.text_input id="email" name="email" value="" type="email" label="Email" required placeholder="hello@tuist.dev" /> <:footer> <.modal_footer> <:action> <.button label="Cancel" variant="secondary" /> </:action> <:action> <.button label="Send" /> </:action> </.modal_footer> </:footer> </.modal> <.modal id="modal-header-types-success" description="Operation completed successfully" title="Success" header_type="success" header_size="large" > <:trigger :let={attrs}> <.button label="Success Modal" {attrs} /> </:trigger> <p>Your operation has been completed successfully!</p> <:footer> <.modal_footer> <:action> <.button label="Close" /> </:action> </.modal_footer> </:footer> </.modal> <.modal id="modal-header-types-info" description="Important information about this action" title="Information" header_type="info" header_size="large" > <:trigger :let={attrs}> <.button label="Info Modal" {attrs} /> </:trigger> <p>Here's some important information you should know before proceeding.</p> <:footer> <.modal_footer> <:action> <.button label="Got it" /> </:action> </.modal_footer> </:footer> </.modal> <.modal id="modal-header-types-warning" description="This action requires your attention" title="Warning" header_type="warning" header_size="large" > <:trigger :let={attrs}> <.button label="Warning Modal" {attrs} /> </:trigger> <p>This action may have consequences. Please review before continuing.</p> <:footer> <.modal_footer> <:action> <.button label="Cancel" variant="secondary" /> </:action> <:action> <.button label="Continue" variant="destructive" /> </:action> </.modal_footer> </:footer> </.modal> <.modal id="modal-header-types-error" description="Something went wrong" title="Error" header_type="error" header_size="large" > <:trigger :let={attrs}> <.button label="Error Modal" {attrs} /> </:trigger> <p>An error occurred while processing your request. Please try again.</p> <:footer> <.modal_footer> <:action> <.button label="Retry" /> </:action> </.modal_footer> </:footer> </.modal>
Modal with small header - description is not displayed.
Modal with large header - description is displayed below the title.
<.modal id="modal-header-sizes-small" description="This description won't be shown because header size is small" title="Small Header" header_type="default" header_size="small" > <:trigger :let={attrs}> <.button label="Small Header" {attrs} /> </:trigger> <p>Modal with small header - description is not displayed.</p> <:footer> <.modal_footer> <:action> <.button label="Close" /> </:action> </.modal_footer> </:footer> </.modal> <.modal id="modal-header-sizes-large" description="This description is visible because header size is large" title="Large Header" header_type="default" header_size="large" > <:trigger :let={attrs}> <.button label="Large Header" {attrs} /> </:trigger> <p>Modal with large header - description is displayed below the title.</p> <:footer> <.modal_footer> <:action> <.button label="Close" /> </:action> </.modal_footer> </:footer> </.modal>