Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagIconHeaderImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Modal
A modal displays content that temporarily blocks interactions with the main view of a site.

See:
ConfirmPortal
src/modules/Modal/Modal.js
Semantic UI Modal Docs
ModalModal.ActionsModal.ContentModal.DescriptionModal.Header

Types

Modal

A standard modal.

Basic

A modal can reduce its complexity.

Top Aligned

A modal can be top aligned.

Scrolling Modal

When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

<Modal.Content image /> requires an image with wrapped markup: <Image wrapped />

Multiple Modals

Multiple modals can be displayed on top of one another.

Controlled

A modal can be a controlled component.

Shorthand

A modal can be created with shorthand props.

Variations

Size

A modal can vary in size.

Scrolling Content2.2.11

A modal can use the entire size of the screen.

Dimmer Variations

A modal can specify dimmer variations.

Close Config

Modal can config not to close by escape or dimmer click.

A Modal can have a close icon.

This is the bottom