Modal

Overview

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.

Demo

Select Variant

Props

Property	Description	Type	Values	Default	Required
primaryLabel	The label for the primary action	string	string		✓
content	The modal content	string \| undefined	string \| undefined
secondaryLabel	The label for the secondary action	string \| undefined	string \| undefined
title	The title for the modal	string \| undefined	string \| undefined
show	Open and close the modal	boolean \| undefined	boolean \| undefined
closeOnOutsideClick	Whether the modal should close on outside click	boolean \| undefined	boolean \| undefined	true
primaryFocus	Sets the focus to the primary button	boolean \| undefined	boolean \| undefined	true
showSpinner	Show a spinner	boolean \| undefined	boolean \| undefined
spinnerText	The text for the spinner	string \| undefined	string \| undefined
qaName	Optional QA name for id attributes	string \| undefined	string \| undefined

Slots

Name	Description	Type
default	The content for the modal.	any
icon	The icon for the modal.	any

Events

Name	Return Type
modalClose	void
primaryAction	void
secondaryAction	void