Dialog

Dialog components are usually used to ask for a user explicit interaction. Flair uses @headlessui/react Dialog under the hood.

When a Dialog is opened, scroll on the page are automatically locked, and focus are trapped within the Dialog. A Dialog must have a focusable element inside of it, as it will attempt to focus on the element when the Dialog opens.

Clicking anywhere on the overlay will call the onClose prop to close the Dialog. Pressing the Esc key also has the same effect.

Manually setting initial focus

In case your Dialog contains multiple focusable components, initial focus can be manually set by passing a reference to the element via the initialFocus prop.