Dialogs consist of a scrim/lightbox, an optional header, an optional close button, body content, at least one action button and an optional illustration. For Dialogs that require user action, the tertiary button style should be used by default. Complex workflows or destructive actions may require the use of the primary button style to communicate high priority actions. When Buttons are used on a dialog, they are always found at the bottom of the Dialog surface.



This component appears when the application needs to give the user information in a manner that involves interruption, such as when an error occurs, or the program needs input or decision from the user.


Getting Started

You must configure the labels property to have a relevant title. See Labels.


v-modeluse to open and close DialogBooleantrue-
labelsObject containing labels to be used by this component. Mainly used for i18n or customization of labels. See Labels exampleObjectfalseSee Labels example
hide-closehides the close icon/link in the top rightBoolean-true
hide-titlehides the title text. Title text is still needed for accessibility but will not be visually displayedBooleantrue-
relativewhen true the dialog will appear absolutely positioned against the first relative ancestorBoolean-false


Text labels for autocomplete can be customized via the labels property. The default labels values are:

  title: "REQUIRED",
  close: "Close Dialog"

title MUST be set to an appropriate value.


  • update:modelValue - emitted with false when dialog is closed by ESC key or close button
  • shown - emitted when the dialog is shown
  • hidden - emitted when the dialog is hidden


  • default - main content of the dialog should go here. Header is specified via Labels
  • footer - footer content should be placed in here


  • feather-dialog - div on modal
  • feather-dialog-header - header in modal content
  • feather-dialog-footer - footer in modal content


During our testing we have found that clicking an item in Safari does not necessarily mean it recieves focus. Therefore, when closing the dialog refocusing the activating element does not function as expected.