yarn add @twilio-paste/stack
import {Stack} from '@twilio-paste/core/stack';
<Stack orientation="vertical" spacing="space40">
  Foo
</Stack>;
spacing RequiredRequired
- Type
 "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 25 more ... | "spaceNegative200"
as
- Type
 keyof IntrinsicElements
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
 string- Default
 'STACK'
orientation
- Type
 | StackOrientationOptions | (StackOrientationOptions | null)[] | { [x: string]: StackOrientationOptions | undefined [x: number]: StackOrientationOptions | undefined }
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
about
- Type
 string
accessKey
- Type
 string
aria-activedescendant
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
- Type
 string
aria-atomic
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
- Type
 Booleanish
aria-autocomplete
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
- Type
 "list" | "none" | "inline" | "both"
aria-busy
Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
- Type
 Booleanish
aria-checked
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
- Type
 boolean | "true" | "false" | "mixed"
aria-colcount
Defines the total number of columns in a table, grid, or treegrid.
- Type
 number
aria-colindex
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
- Type
 number
aria-colspan
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
- Type
 number
aria-controls
Identifies the element (or elements) whose contents or presence are controlled by the current element.
- Type
 string
aria-current
Indicates the element that represents the current item within a container or set of related elements.
- Type
 | boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"
aria-describedby
Identifies the element (or elements) that describes the object.
- Type
 string
aria-details
Identifies the element that provides a detailed, extended description for the object.
- Type
 string
aria-disabled
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
- Type
 Booleanish
aria-dropeffect
Indicates what functions can be performed when a dragged object is released on the drop target.
- Type
 "link" | "none" | "copy" | "execute" | "move" | "popup"
aria-errormessage
Identifies the element that provides an error message for the object.
- Type
 string
aria-expanded
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
- Type
 Booleanish
aria-flowto
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
- Type
 string
aria-grabbed
Indicates an element's "grabbed" state in a drag-and-drop operation.
- Type
 Booleanish
aria-haspopup
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
- Type
 | boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree"
aria-hidden
Indicates whether the element is exposed to an accessibility API.
- Type
 Booleanish
aria-invalid
Indicates the entered value does not conform to the format expected by the application.
- Type
 boolean | "true" | "false" | "grammar" | "spelling"
aria-keyshortcuts
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
- Type
 string
aria-label
Defines a string value that labels the current element.
- Type
 string
aria-labelledby
Identifies the element (or elements) that labels the current element.
- Type
 string
aria-level
Defines the hierarchical level of an element within a structure.
- Type
 number
aria-live
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
- Type
 "off" | "assertive" | "polite"
aria-modal
Indicates whether an element is modal when displayed.
- Type
 Booleanish
aria-multiline
Indicates whether a text box accepts multiple lines of input or only a single line.
- Type
 Booleanish
aria-multiselectable
Indicates that the user may select more than one item from the current selectable descendants.
- Type
 Booleanish
aria-orientation
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
- Type
 "horizontal" | "vertical"
aria-owns
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
- Type
 string
aria-placeholder
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
- Type
 string
aria-posinset
Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
- Type
 number
aria-pressed
Indicates the current "pressed" state of toggle buttons.
- Type
 boolean | "true" | "false" | "mixed"
aria-readonly
Indicates that the element is not editable, but is otherwise operable.
- Type
 Booleanish
aria-relevant
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
- Type
 | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
aria-required
Indicates that user input is required on the element before a form may be submitted.
- Type
 Booleanish
aria-roledescription
Defines a human-readable, author-localized description for the role of an element.
- Type
 string
aria-rowcount
Defines the total number of rows in a table, grid, or treegrid.
- Type
 number
aria-rowindex
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
- Type
 number
aria-rowspan
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
- Type
 number
aria-selected
Indicates the current "selected" state of various widgets.
- Type
 Booleanish
aria-setsize
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
- Type
 number
aria-sort
Indicates if items in a table or grid are sorted in ascending or descending order.
- Type
 "none" | "ascending" | "descending" | "other"
aria-valuemax
Defines the maximum allowed value for a range widget.
- Type
 number
aria-valuemin
Defines the minimum allowed value for a range widget.
- Type
 number
aria-valuenow
Defines the current value for a range widget.
- Type
 number
aria-valuetext
Defines the human readable text alternative of aria-valuenow for a range widget.
- Type
 string
autoCapitalize
- Type
 string
autoCorrect
- Type
 string
autoSave
- Type
 string
contentEditable
- Type
 Booleanish | "inherit"
contextMenu
- Type
 string
dangerouslySetInnerHTML
- Type
 { __html: string }
datatype
- Type
 string
defaultChecked
- Type
 boolean
defaultValue
- Type
 string | number | readonly string[]
dir
- Type
 string
draggable
- Type
 Booleanish
hidden
- Type
 boolean
id
- Type
 string
inlist
- Type
 any
inputMode
Hints at the type of data that might be entered by the user while editing the element or its contents
- Type
 | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"
is
Specify that a standard HTML element should behave like a defined custom built-in element
- Type
 string
itemID
- Type
 string
itemProp
- Type
 string
itemRef
- Type
 string
itemScope
- Type
 boolean
itemType
- Type
 string
key
- Type
 Key
lang
- Type
 string
nonce
- Type
 string
onAbort
- Type
 ReactEventHandler<HTMLDivElement>
onAbortCapture
- Type
 ReactEventHandler<HTMLDivElement>
onAnimationEnd
- Type
 AnimationEventHandler<HTMLDivElement>
onAnimationEndCapture
- Type
 AnimationEventHandler<HTMLDivElement>
onAnimationIteration
- Type
 AnimationEventHandler<HTMLDivElement>
onAnimationIterationCapture
- Type
 AnimationEventHandler<HTMLDivElement>
onAnimationStart
- Type
 AnimationEventHandler<HTMLDivElement>
onAnimationStartCapture
- Type
 AnimationEventHandler<HTMLDivElement>
onAuxClick
- Type
 MouseEventHandler<HTMLDivElement>
onAuxClickCapture
- Type
 MouseEventHandler<HTMLDivElement>
onBeforeInput
- Type
 FormEventHandler<HTMLDivElement>
onBeforeInputCapture
- Type
 FormEventHandler<HTMLDivElement>
onBlur
- Type
 FocusEventHandler<HTMLDivElement>
onBlurCapture
- Type
 FocusEventHandler<HTMLDivElement>
onCanPlay
- Type
 ReactEventHandler<HTMLDivElement>
onCanPlayCapture
- Type
 ReactEventHandler<HTMLDivElement>
onCanPlayThrough
- Type
 ReactEventHandler<HTMLDivElement>
onCanPlayThroughCapture
- Type
 ReactEventHandler<HTMLDivElement>
onChange
- Type
 FormEventHandler<HTMLDivElement>
onChangeCapture
- Type
 FormEventHandler<HTMLDivElement>
onClick
- Type
 MouseEventHandler<HTMLDivElement>
onClickCapture
- Type
 MouseEventHandler<HTMLDivElement>
onCompositionEnd
- Type
 CompositionEventHandler<HTMLDivElement>
onCompositionEndCapture
- Type
 CompositionEventHandler<HTMLDivElement>
onCompositionStart
- Type
 CompositionEventHandler<HTMLDivElement>
onCompositionStartCapture
- Type
 CompositionEventHandler<HTMLDivElement>
onCompositionUpdate
- Type
 CompositionEventHandler<HTMLDivElement>
onCompositionUpdateCapture
- Type
 CompositionEventHandler<HTMLDivElement>
onContextMenu
- Type
 MouseEventHandler<HTMLDivElement>
onContextMenuCapture
- Type
 MouseEventHandler<HTMLDivElement>
onCopy
- Type
 ClipboardEventHandler<HTMLDivElement>
onCopyCapture
- Type
 ClipboardEventHandler<HTMLDivElement>
onCut
- Type
 ClipboardEventHandler<HTMLDivElement>
onCutCapture
- Type
 ClipboardEventHandler<HTMLDivElement>
onDoubleClick
- Type
 MouseEventHandler<HTMLDivElement>
onDoubleClickCapture
- Type
 MouseEventHandler<HTMLDivElement>
onDrag
- Type
 DragEventHandler<HTMLDivElement>
onDragCapture
- Type
 DragEventHandler<HTMLDivElement>
onDragEnd
- Type
 DragEventHandler<HTMLDivElement>
onDragEndCapture
- Type
 DragEventHandler<HTMLDivElement>
onDragEnter
- Type
 DragEventHandler<HTMLDivElement>
onDragEnterCapture
- Type
 DragEventHandler<HTMLDivElement>
onDragExit
- Type
 DragEventHandler<HTMLDivElement>
onDragExitCapture
- Type
 DragEventHandler<HTMLDivElement>
onDragLeave
- Type
 DragEventHandler<HTMLDivElement>
onDragLeaveCapture
- Type
 DragEventHandler<HTMLDivElement>
onDragOver
- Type
 DragEventHandler<HTMLDivElement>
onDragOverCapture
- Type
 DragEventHandler<HTMLDivElement>
onDragStart
- Type
 DragEventHandler<HTMLDivElement>
onDragStartCapture
- Type
 DragEventHandler<HTMLDivElement>
onDrop
- Type
 DragEventHandler<HTMLDivElement>
onDropCapture
- Type
 DragEventHandler<HTMLDivElement>
onDurationChange
- Type
 ReactEventHandler<HTMLDivElement>
onDurationChangeCapture
- Type
 ReactEventHandler<HTMLDivElement>
onEmptied
- Type
 ReactEventHandler<HTMLDivElement>
onEmptiedCapture
- Type
 ReactEventHandler<HTMLDivElement>
onEncrypted
- Type
 ReactEventHandler<HTMLDivElement>
onEncryptedCapture
- Type
 ReactEventHandler<HTMLDivElement>
onEnded
- Type
 ReactEventHandler<HTMLDivElement>
onEndedCapture
- Type
 ReactEventHandler<HTMLDivElement>
onError
- Type
 ReactEventHandler<HTMLDivElement>
onErrorCapture
- Type
 ReactEventHandler<HTMLDivElement>
onFocus
- Type
 FocusEventHandler<HTMLDivElement>
onFocusCapture
- Type
 FocusEventHandler<HTMLDivElement>
onGotPointerCapture
- Type
 PointerEventHandler<HTMLDivElement>
onGotPointerCaptureCapture
- Type
 PointerEventHandler<HTMLDivElement>
onInput
- Type
 FormEventHandler<HTMLDivElement>
onInputCapture
- Type
 FormEventHandler<HTMLDivElement>
onInvalid
- Type
 FormEventHandler<HTMLDivElement>
onInvalidCapture
- Type
 FormEventHandler<HTMLDivElement>
onKeyDown
- Type
 KeyboardEventHandler<HTMLDivElement>
onKeyDownCapture
- Type
 KeyboardEventHandler<HTMLDivElement>
onKeyPress
- Type
 KeyboardEventHandler<HTMLDivElement>
onKeyPressCapture
- Type
 KeyboardEventHandler<HTMLDivElement>
onKeyUp
- Type
 KeyboardEventHandler<HTMLDivElement>
onKeyUpCapture
- Type
 KeyboardEventHandler<HTMLDivElement>
onLoad
- Type
 ReactEventHandler<HTMLDivElement>
onLoadCapture
- Type
 ReactEventHandler<HTMLDivElement>
onLoadedData
- Type
 ReactEventHandler<HTMLDivElement>
onLoadedDataCapture
- Type
 ReactEventHandler<HTMLDivElement>
onLoadedMetadata
- Type
 ReactEventHandler<HTMLDivElement>
onLoadedMetadataCapture
- Type
 ReactEventHandler<HTMLDivElement>
onLoadStart
- Type
 ReactEventHandler<HTMLDivElement>
onLoadStartCapture
- Type
 ReactEventHandler<HTMLDivElement>
onLostPointerCapture
- Type
 PointerEventHandler<HTMLDivElement>
onLostPointerCaptureCapture
- Type
 PointerEventHandler<HTMLDivElement>
onMouseDown
- Type
 MouseEventHandler<HTMLDivElement>
onMouseDownCapture
- Type
 MouseEventHandler<HTMLDivElement>
onMouseEnter
- Type
 MouseEventHandler<HTMLDivElement>
onMouseLeave
- Type
 MouseEventHandler<HTMLDivElement>
onMouseMove
- Type
 MouseEventHandler<HTMLDivElement>
onMouseMoveCapture
- Type
 MouseEventHandler<HTMLDivElement>
onMouseOut
- Type
 MouseEventHandler<HTMLDivElement>
onMouseOutCapture
- Type
 MouseEventHandler<HTMLDivElement>
onMouseOver
- Type
 MouseEventHandler<HTMLDivElement>
onMouseOverCapture
- Type
 MouseEventHandler<HTMLDivElement>
onMouseUp
- Type
 MouseEventHandler<HTMLDivElement>
onMouseUpCapture
- Type
 MouseEventHandler<HTMLDivElement>
onPaste
- Type
 ClipboardEventHandler<HTMLDivElement>
onPasteCapture
- Type
 ClipboardEventHandler<HTMLDivElement>
onPause
- Type
 ReactEventHandler<HTMLDivElement>
onPauseCapture
- Type
 ReactEventHandler<HTMLDivElement>
onPlay
- Type
 ReactEventHandler<HTMLDivElement>
onPlayCapture
- Type
 ReactEventHandler<HTMLDivElement>
onPlaying
- Type
 ReactEventHandler<HTMLDivElement>
onPlayingCapture
- Type
 ReactEventHandler<HTMLDivElement>
onPointerCancel
- Type
 PointerEventHandler<HTMLDivElement>
onPointerCancelCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerDown
- Type
 PointerEventHandler<HTMLDivElement>
onPointerDownCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerEnter
- Type
 PointerEventHandler<HTMLDivElement>
onPointerEnterCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerLeave
- Type
 PointerEventHandler<HTMLDivElement>
onPointerLeaveCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerMove
- Type
 PointerEventHandler<HTMLDivElement>
onPointerMoveCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerOut
- Type
 PointerEventHandler<HTMLDivElement>
onPointerOutCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerOver
- Type
 PointerEventHandler<HTMLDivElement>
onPointerOverCapture
- Type
 PointerEventHandler<HTMLDivElement>
onPointerUp
- Type
 PointerEventHandler<HTMLDivElement>
onPointerUpCapture
- Type
 PointerEventHandler<HTMLDivElement>
onProgress
- Type
 ReactEventHandler<HTMLDivElement>
onProgressCapture
- Type
 ReactEventHandler<HTMLDivElement>
onRateChange
- Type
 ReactEventHandler<HTMLDivElement>
onRateChangeCapture
- Type
 ReactEventHandler<HTMLDivElement>
onReset
- Type
 FormEventHandler<HTMLDivElement>
onResetCapture
- Type
 FormEventHandler<HTMLDivElement>
onResize
- Type
 ReactEventHandler<HTMLDivElement>
onResizeCapture
- Type
 ReactEventHandler<HTMLDivElement>
onScroll
- Type
 UIEventHandler<HTMLDivElement>
onScrollCapture
- Type
 UIEventHandler<HTMLDivElement>
onSeeked
- Type
 ReactEventHandler<HTMLDivElement>
onSeekedCapture
- Type
 ReactEventHandler<HTMLDivElement>
onSeeking
- Type
 ReactEventHandler<HTMLDivElement>
onSeekingCapture
- Type
 ReactEventHandler<HTMLDivElement>
onSelect
- Type
 ReactEventHandler<HTMLDivElement>
onSelectCapture
- Type
 ReactEventHandler<HTMLDivElement>
onStalled
- Type
 ReactEventHandler<HTMLDivElement>
onStalledCapture
- Type
 ReactEventHandler<HTMLDivElement>
onSubmit
- Type
 FormEventHandler<HTMLDivElement>
onSubmitCapture
- Type
 FormEventHandler<HTMLDivElement>
onSuspend
- Type
 ReactEventHandler<HTMLDivElement>
onSuspendCapture
- Type
 ReactEventHandler<HTMLDivElement>
onTimeUpdate
- Type
 ReactEventHandler<HTMLDivElement>
onTimeUpdateCapture
- Type
 ReactEventHandler<HTMLDivElement>
onTouchCancel
- Type
 TouchEventHandler<HTMLDivElement>
onTouchCancelCapture
- Type
 TouchEventHandler<HTMLDivElement>
onTouchEnd
- Type
 TouchEventHandler<HTMLDivElement>
onTouchEndCapture
- Type
 TouchEventHandler<HTMLDivElement>
onTouchMove
- Type
 TouchEventHandler<HTMLDivElement>
onTouchMoveCapture
- Type
 TouchEventHandler<HTMLDivElement>
onTouchStart
- Type
 TouchEventHandler<HTMLDivElement>
onTouchStartCapture
- Type
 TouchEventHandler<HTMLDivElement>
onTransitionEnd
- Type
 TransitionEventHandler<HTMLDivElement>
onTransitionEndCapture
- Type
 TransitionEventHandler<HTMLDivElement>
onVolumeChange
- Type
 ReactEventHandler<HTMLDivElement>
onVolumeChangeCapture
- Type
 ReactEventHandler<HTMLDivElement>
onWaiting
- Type
 ReactEventHandler<HTMLDivElement>
onWaitingCapture
- Type
 ReactEventHandler<HTMLDivElement>
onWheel
- Type
 WheelEventHandler<HTMLDivElement>
onWheelCapture
- Type
 WheelEventHandler<HTMLDivElement>
placeholder
- Type
 string
prefix
- Type
 string
property
- Type
 string
radioGroup
- Type
 string
resource
- Type
 string
results
- Type
 number
role
- Type
 AriaRole
security
- Type
 string
slot
- Type
 string
spellCheck
- Type
 Booleanish
suppressContentEditableWarning
- Type
 boolean
suppressHydrationWarning
- Type
 boolean
tabIndex
- Type
 number
title
- Type
 string
translate
- Type
 "yes" | "no"
typeof
- Type
 string
unselectable
- Type
 "on" | "off"
vocab
- Type
 string