Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonFlagContainerHeaderDividerImageIconLabelInputListPlaceholderLoaderRailRevealStepSegment
Collections
BreadcrumbFormMessageMenuGridTable
Views
CommentFeedStatisticCardItemAdvertisement
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSidebarSearchTabStickyTransition
Addons
ConfirmRadioPortalSelectPaginationText 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.DimmerModal.Header

Types

Modal

A standard modal.

Basic

A modal can reduce its complexity.

Shorthand

A modal can be created with shorthand props.

Shorthand API usage can be more simple as it handles the state of component internally.

Content

Close icon

A Modal can have a close icon.

Image Content

A modal can contain image content.

Dimmer

A modal can specify dimmer variations.

Variations

Size

A modal can vary in size.

Top Aligned

A modal can be top aligned.

Scrolling Content2.2.11

A modal can use the entire size of the screen.

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.

<ModalContent image /> requires an image with wrapped markup: <Image wrapped />

Usage

Callbacks

A Modal provides callbacks to manage its state.

Close Config

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

Multiple Modals

Multiple modals can be displayed on top of one another.

This is the bottom
Blazing deployments by Vercel.