This story is not configured to handle controls. Learn how to add controls
NameDescriptionDefaultControl
isOpen*
boolean
--
onClose*
() => void
--
modalContentProps
ModalContentProps
--
onDragUp
((args: ComponentCallbackArgs) => void)
--
aspectRatio
number
0.5625
-
storyDuration
number
--
onStoriesCompleted
(() => void)
--
indicator
IndicatorProps
--
components
ComponentsProps
--
isDragging
boolean
--
onStoryChange
((storyId: number) => void)
--
as
As<any>
--
_hover
Styles for CSS selector &:hover
CSSObject
--
_active
Styles for CSS Selector &:active
CSSObject
--
_focus
Styles for CSS selector &:focus
CSSObject
--
_highlighted
Styles for the highlighted state.
CSSObject
--
_focusWithin

Styles to apply when a child of this element has received focus

  • CSS Selector &:focus-within
CSSObject
--
_focusVisible

Styles to apply when this element has received focus via tabbing

  • CSS Selector &:focus-visible
CSSObject
--
_disabled

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

  • &[aria-disabled=true]
  • &:disabled
  • &[data-disabled]
CSSObject
--
_readOnly
Styles for CSS Selector &:readonly
CSSObject
--
_before

Styles for CSS selector &::before

NOTE:When using this, ensure the content is wrapped in a backtick.

CSSObject
--
_after

Styles for CSS selector &::after

NOTE:When using this, ensure the content is wrapped in a backtick.

CSSObject
--
_empty
Styles for CSS selector &:empty
CSSObject
--
_expanded

Styles to apply when the ARIA attribute aria-expanded is true

  • CSS selector &[aria-expanded=true]
CSSObject
--
_checked

Styles to apply when the ARIA attribute aria-checked is true

  • CSS selector &[aria-checked=true]
CSSObject
--
_grabbed

Styles to apply when the ARIA attribute aria-grabbed is true

  • CSS selector &[aria-grabbed=true]
CSSObject
--
_pressed

Styles for CSS Selector &[aria-pressed=true] Typically used to style the current "pressed" state of toggle buttons

CSSObject
--
_invalid

Styles to apply when the ARIA attribute aria-invalid is true

  • CSS selector &[aria-invalid=true]
CSSObject
--
_valid

Styles for the valid state

  • CSS selector &[data-valid], &[data-state=valid]
CSSObject
--
_loading

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. Useful for styling loading states

CSSObject
--
_selected

Styles to apply when the ARIA attribute aria-selected is true

  • CSS selector &[aria-selected=true]
CSSObject
--
_hidden
Styles for CSS Selector [hidden=true]
CSSObject
--
_autofill
Styles for CSS Selector &:-webkit-autofill
CSSObject
--
_even
Styles for CSS Selector &:nth-child(even)
CSSObject
--
_odd
Styles for CSS Selector &:nth-child(odd)
CSSObject
--
_first
Styles for CSS Selector &:first-of-type
CSSObject
--
_last
Styles for CSS Selector &:last-of-type
CSSObject
--
_notFirst
Styles for CSS Selector &:not(:first-of-type)
CSSObject
--
_notLast
Styles for CSS Selector &:not(:last-of-type)
CSSObject
--
_visited
Styles for CSS Selector &:visited
CSSObject
--
_activeLink

Used to style the active link in a navigation Styles for CSS Selector &[aria-current=page]

CSSObject
--
_activeStep

Used to style the current step within a process Styles for CSS Selector &[aria-current=step]

CSSObject
--
_indeterminate

Styles to apply when the ARIA attribute aria-checked is mixed

  • CSS selector &[aria-checked=mixed]
CSSObject
--
_groupHover
Styles to apply when a parent element with .group, data-group or role=group is hovered
CSSObject
--
_peerHover
Styles to apply when a sibling element with .peer or data-peer is hovered
CSSObject
--
_groupFocus
Styles to apply when a parent element with .group, data-group or role=group is focused
CSSObject
--
_peerFocus
Styles to apply when a sibling element with .peer or data-peer is focused
CSSObject
--
_groupFocusVisible
Styles to apply when a parent element with .group, data-group or role=group has visible focus
CSSObject
--
_peerFocusVisible
Styles to apply when a sibling element with .peeror data-peer has visible focus
CSSObject
--
_groupActive
Styles to apply when a parent element with .group, data-group or role=group is active
CSSObject
--
_peerActive
Styles to apply when a sibling element with .peer or data-peer is active
CSSObject
--
_groupDisabled
Styles to apply when a parent element with .group, data-group or role=group is disabled
CSSObject
--
_peerDisabled
Styles to apply when a sibling element with .peer or data-peer is disabled
CSSObject
--
_groupInvalid
Styles to apply when a parent element with .group, data-group or role=group is invalid
CSSObject
--
_peerInvalid
Styles to apply when a sibling element with .peer or data-peer is invalid
CSSObject
--
_groupChecked
Styles to apply when a parent element with .group, data-group or role=group is checked
CSSObject
--
_peerChecked
Styles to apply when a sibling element with .peer or data-peer is checked
CSSObject
--
_groupFocusWithin
Styles to apply when a parent element with .group, data-group or role=group has focus within
CSSObject
--
_peerFocusWithin
Styles to apply when a sibling element with .peer or data-peer has focus within
CSSObject
--
_peerPlaceholderShown
Styles to apply when a sibling element with .peer or data-peer has placeholder shown
CSSObject
--
_placeholder
Styles for CSS Selector &::placeholder.
CSSObject
--
_placeholderShown
Styles for CSS Selector &:placeholder-shown.
CSSObject
--
_fullScreen
Styles for CSS Selector &:fullscreen.
CSSObject
--
_selection
Styles for CSS Selector &::selection
CSSObject
--
_rtl

Styles for CSS Selector [dir=rtl] & It is applied when a parent element or this element has dir="rtl"

CSSObject
--
_ltr

Styles for CSS Selector [dir=ltr] & It is applied when a parent element or this element has dir="ltr"

CSSObject
--
_mediaDark

Styles for CSS Selector @media (prefers-color-scheme: dark) It is used when the user has requested the system use a light or dark color theme.

CSSObject
--
_mediaReduceMotion

Styles for CSS Selector @media (prefers-reduced-motion: reduce) It is used when the user has requested the system to reduce the amount of animations.

CSSObject
--
_dark

Styles for when data-theme is applied to any parent of this component or element.

CSSObject
--
_light

Styles for when data-theme is applied to any parent of this component or element.

CSSObject
--