About modal

An about modal displays information about an application like product version number(s), as well as any appropriate legal text.

Examples

Basic

Without product name

Complex user positioned content

Props

AboutModal

*required
NameTypeDefaultDescription
brandImageAltrequiredstringThe alternate text of the brand image
brandImageSrcrequiredstringThe URL of the image for the brand
childrenrequiredReact.ReactNodeContent rendered inside the about modal
appendToHTMLElement | (() => HTMLElement)The parent container to append the modal to. Defaults to document.body
aria-labelstringAria label for the about modal. This should be used when no productName prop is provided
backgroundImageSrcstringThe URL or file path of the image for the background
classNamestringAdditional classes added to the about modal
closeButtonAriaLabelstringSet aria label to the close button
disableFocusTrapbooleanFlag to disable focus trap
hasNoContentContainerbooleanfalsePrevents the about modal from rendering content inside a container; allows for more flexible layouts
isOpenbooleanfalseFlag to show the about modal
onClose(event: React.MouseEvent | MouseEvent | KeyboardEvent) => void(_e): any => undefinedA callback for when the close button is clicked
productNamestringProduct name
trademarkstringTrademark information

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub