ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Modal

yarn add @clayui/modal

A modal is a secondary window that communicates or provides an action inside the same process.

  • Examples
  • Markup
  • API

Stable3.69.0View in LexiconCHANGELOGstorybook demos

  • Modal
  • Modal.Body
  • Modal.Footer
  • Modal.Header
  • Modal.Item
  • Modal.ItemGroup
  • Modal.Subtitle
  • Modal.SubtitleSection
  • Modal.Title
  • Modal.TitleSection
  • Modal.TitleIndicator

Modal

PropertyTypeRequiredDefaultDescription
center
booleanfalseFlag indicating to vertically center the modal.
containerElementRef
React.RefObject<Element>falseContainer element to render modal into.
containerProps
IPortalBasePropsfalse{}Props to add to the <ClayPortal/>.
disableAutoClose
booleanfalsefalseA flag indicating if the modal shouldn't be closed when either the ESC key is pressed or when clicking outside the modal
size
SizefalseThe size of element modal.
observer
ObservertrueObserver is Modal's communication system with `useModal` hook, adds observer from `useModal` hook here.
zIndex
numberfalseAllows setting a custom z-index value, overriding the default one which is 1040, modal body z-index will be +10 of this value

Modal.Body

PropertyTypeRequiredDefaultDescription
iFrameProps
React.HTMLAttributes<HTMLIFrameElement>false{}Props to add to the iframe element
scrollable
booleanfalseFlag to indicate if body should be a fixed height with a scrollable overflow.
url
stringfalseUrl to place an iframe in the body of the modal.

Modal.Footer

PropertyTypeRequiredDefaultDescription
first
React.ReactElementfalseSets the elements that are positioned `first following the LTR direction on the footer.
last
React.ReactElementfalseSets the elements that are positioned `last` following the LTR direction on the footer.
middle
React.ReactElementfalseSets the elements that are positioned in the middle of the footer.

Modal.Header

PropertyTypeRequiredDefaultDescription
withTitle
booleanfalsetrueFlag for indicating if you want to use the Header its children being the title. Set to `false` if you want to use this as a low-level component.

Modal.Item

PropertyTypeRequiredDefaultDescription
shrink
booleanfalseFlag for indicating if item should autofitting the width

Modal.ItemGroup

Extends from React.HTMLAttributes<HTMLDivElement>

Modal.Subtitle

Extends from React.HTMLAttributes<HTMLDivElement>

Modal.SubtitleSection

Extends from React.HTMLAttributes<HTMLDivElement>

Modal.Title

Extends from React.HTMLAttributes<HTMLDivElement>

Modal.TitleSection

Extends from React.HTMLAttributes<HTMLDivElement>

Modal.TitleIndicator

Extends from React.HTMLAttributes<HTMLDivElement>

How can this be improved? Create an issue!