Ariakit
/

DialogDescription

Renders a description in a dialog. This component must be wrapped with Dialog so the aria-describedby prop is properly set on the dialog element.

Code examples

const [open, setOpen] = useState(false);
<Dialog open={open} onClose={() => setOpen(false)}>
</Dialog>

Optional Props


render

RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.


store

DialogStore | undefined

Object returned by the useDialogStore hook.

Note: This prop has no effect on this component. The description is linked to the closest Dialog component through React context, so it must be rendered inside the dialog for the aria-describedby prop to be set on the dialog element.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue