modal
v0.88.2arrow_drop_down











Action onClick handler when using shorthand actions
.
Called when a close event happens.
Called when the portal is mounted on the DOM.
Called when an open event happens.
Called when the portal is unmounted from the DOM.
A modal displays content that temporarily blocks interactions with the main view of a site.
onClick handler for an action. Mutually exclusive with children.
A modal can contain a row of actions.
A modal can contain content.
A modal can contain a description with one or more paragraphs.
A modal can have a header.
Ensures that modal can fit viewport without scroll.
Creates legacy styles for IE11.
Name | Type | Default value | Description |
---|---|---|---|
as | elementType | An element type to render as (string or function). | |
actions | custom | Shorthand for Modal.Actions. Typically an array of button shorthand. | |
basic | bool | A modal can reduce its complexity | |
centered | bool | true | A modal can be vertically centered in the viewport |
children | node | Primary content. | |
className | string | Additional classes. | |
closeIcon | node | object | bool | Shorthand for the close icon. Closes the modal on click. | |
closeOnDimmerClick | bool | true | Whether or not the Modal should close when the dimmer is clicked. |
closeOnDocumentClick | bool | false | Whether or not the Modal should close when the document is clicked. |
content | custom | Simple text content for the Modal. | |
defaultOpen | bool | Initial value of open. | |
dimmer | true | 'inverted' | 'blurring' | true | A Modal can appear in a dimmer. |
eventPool | string | 'Modal' | Event pool namespace that is used to handle component events |
header | custom | Modal displayed above the content in bold. | |
mountNode | any | The node where the modal should mount. Defaults to document.body. | |
onActionClick | function | React’s original SyntheticEvent. | |
onClose | function | React’s original SyntheticEvent. | |
onMount | function | ||
onOpen | function | React’s original SyntheticEvent. | |
onUnmount | function | ||
open | bool | Controls whether or not the Modal is displayed. | |
size | 'mini' | 'tiny' | 'small' | 'large' | 'fullscreen' | A modal can vary in size | |
style | object | Custom styles. | |
trigger | node | Element to be rendered in-place where the portal is defined. | |
as | elementType | An element type to render as (string or function). | |
actions | custom | Array of shorthand buttons. | |
children | node | Primary content. | |
className | string | Additional classes. | |
content | custom | Shorthand for primary content. | |
onActionClick | custom | React’s original SyntheticEvent. | |
as | elementType | An element type to render as (string or function). | |
children | node | Primary content. | |
className | string | Additional classes. | |
content | custom | Shorthand for primary content. | |
image | bool | A modal can contain image content. | |
scrolling | bool | A modal can use the entire size of the screen. | |
as | elementType | An element type to render as (string or function). | |
children | node | Primary content. | |
className | string | Additional classes. | |
content | custom | Shorthand for primary content. | |
as | elementType | An element type to render as (string or function). | |
children | node | Primary content. | |
className | string | Additional classes. | |
content | custom | Shorthand for primary content. |