yarn add @twilio-paste/minimizable-dialog - or - yarn add @twilio-paste/core
import {
MinimizableDialog,
MinimizableDialogButton,
MinimizableDialogHeader,
MinimizableDialogContainer,
MinimizableDialogContent,
} from '@twilio-paste/core/minimizable-dialog';
const MinimizableDialogExample: React.FC = () => {
return (
<MinimizableDialogContainer>
<MinimizableDialogButton variant="primary">Open dialog</MinimizableDialogButton>
<MinimizableDialog aria-label="My Dialog">
<MinimizableDialogHeader>Dialog header</MinimizableDialogHeader>
<MinimizableDialogContent>Dialog content</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
);
};
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
minimized
Determines whether or not the dialog is minimized.
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
aria-label RequiredRequired
Accessible title for the Minimalize Dialog.
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'MINIMIZABLE_DIALOG'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'MINIMIZABLE_DIALOG_BUTTON'
id
- Type
string
toggle
- Type
() => void
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
'MINIMIZABLE_DIALOG_HEADER'
i18nDismissLabel
Accessible label text for the dismiss button.
- Type
string- Default
'dismiss'
i18nMinimizeLabel
Accessible label text for the minimize button.
- Type
string- Default
'minimize'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
minimized
Determines whether or not the dialog is minimized.
- Type
boolean
state
- Type
MinimizableDialogStateReturn
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'MINIMIZABLE_DIALOG_CONTENT'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.