Skip to canvas
Storybook
/
BasicSkip to canvas
Timed Stories
Handle Stories end
Indicator Customization
Top Bar
Bottom Bar
Handle Drag Up
Yikes! Something went wrong loading these stories.
  1. Recently opened
  3. Back to componentsESC
  4. Clear history
Skip to sidebar
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
--