Prism

Homecomponentsstructural

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Prism. Please use with caution.

Overview

Creates a single dimension row or column from the items you provide. The items will not wrap on overflow. So use it only to display a limited list of items. You can however flip the orientation on certain breakpoints.

A horizontal Stack is similar to Columns with one major difference - Stack items will not size relatively, e.g., using percentages. For that, prefer to use Columns. Absolute sizes work fine.

The following example lays out three Text elements vertically.

Item 1Item 2Item 3

Open in Playroom

Orientation

Use the orientation property to select the direction in which the items are laid out. This property accepts responsive values.

By default the items are laid out in a vertical column. Here's an example of a horizontal stack:

Item 1Item 2Item 3

Open in Playroom

Spacing

Use the spacing property to adjust the spacing between the items. By default, the items have no spacing. This property accepts responsive values.

Here's an example of tags with a $500 spacing:

Tag 1

Tag 2

Tag 3

Open in Playroom

Alignment

The alignment property allows placing items across the direction of orientation, i.e., for a horizontal stack it controls the vertical alignment of the items, and for a vertical stack it controls the horizontal alignment of the items. This property accepts responsive values.

Here's a few alignment options for a vertical stack.

Mia Sabinus

Dietician

Mia Sabinus

Dietician

Mia Sabinus

Dietician

Open in Playroom

Here's a few alignment options for a horizontal stack.

Mia Sabinus

Open in Playroom

Justification

The justification property aligns items along the direction of orientation. For a horizontal stack, it controls the horizontal alignment of the items. For a vertical stack, it controls the vertical alignment of the items. This property accepts responsive values.

Here's a few justification options for a horizontal stack.

Home About Contact

Open in Playroom

Here's a few justification options for a vertical stack.

Mia

Dietician

Mia

Dietician

Mia

Dietician

Mia

Dietician

Open in Playroom

Reversing Items Order

Add a reverse property to reverse the displaying order of the items. This only affects the ordering visually, not the order in the document. For instance, the tab order is preserved.

Item 3Item 2Item 1

Open in Playroom

Dividers

Use dividers to add a divider between items in a vertical stack. This property accepts responsive values.

Here's an example of dividers in a vertical stack.

Item 1

Item 2

Item 3

Open in Playroom

Here's an example of dividers in a horizontal stack.

Item 1

Item 2

Item 3

Open in Playroom

API

children

Required

The items to lay out in the stack.

ReactNode

The element used for the root node.

div

span

main

orientation

The orientation of the stack.

ResponsiveValue<"horizontal" | "vertical">

spacing

Defines the spacing between the items.

ResponsiveValue

alignment

Sets the horizontal alignment of the items.

ResponsiveValue

justification

Sets the vertical alignment of the items.

ResponsiveValue

reverse

Reverse the order of the items.

true

false

dividers

Add separators between the items.

ResponsiveValue<boolean>

data

An object with the data keys and values.

DataAttributeMap

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Ref<HTMLHtmlElement>

key

Key | null

manifest

string

defaultChecked

true

false

defaultValue

string | number | readonly string[]

suppressContentEditableWarning

true

false

suppressHydrationWarning

true

false

accessKey

string

autoCapitalize

(string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters"

autoFocus

true

false

className

string

contentEditable

"inherit" | Booleanish | "plaintext-only"

contextMenu

string

dir

string

draggable

Booleanish

enterKeyHint

done

enter

send

hidden

true

false

string

lang

string

nonce

string

slot

string

spellCheck

Booleanish

style

CSSProperties

tabIndex

number

title

string

translate

yes

radioGroup

string

role

AriaRole

about

string

content

string

datatype

string

inlist

any

prefix

string

property

string

rel

string

resource

string

rev

string

typeof

string

vocab

string

autoCorrect

string

autoSave

string

color

string

results

number

security

string

unselectable

off

popover

auto

manual

popoverTargetAction

hide

show

toggle

popoverTarget

string

inert

@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

true

false

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}

none

text

tel

url

numeric

decimal

Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}

string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

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.

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.

none

both

inline

list

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.

string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.

string

aria-busy

Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.

boolean | "mixed" | "false" | "true"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.

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. @see aria-colcount @see aria-colspan.

number

aria-colindextext

Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.

string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.

number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.

string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby

Identifies the element (or elements) that describes the object. @see aria-labelledby

string

aria-description

Defines a string value that describes or annotates the current element. @see related aria-describedby.

string

aria-details

Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.

string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.

Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1

none

copy

move

link

execute

popup

aria-errormessage

Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.

string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

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.

string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1

Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden

Indicates whether the element is exposed to an accessibility API. @see aria-disabled.

Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.

boolean | "false" | "true" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

string

aria-label

Defines a string value that labels the current element. @see aria-labelledby.

string

aria-labelledby

Identifies the element (or elements) that labels the current element. @see aria-describedby.

string

aria-level

Defines the hierarchical level of an element within a structure.

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.

off

assertive

polite

aria-modal

Indicates whether an element is modal when displayed.

Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

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. @see aria-controls.

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.

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. @see aria-setsize.

number

aria-pressed

Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.

boolean | "mixed" | "false" | "true"

aria-readonly

Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.

Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.

all

text

additions

additions removals

additions text

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.

Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.

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. @see aria-rowcount @see aria-rowspan.

number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.

string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.

number

aria-selected

Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.

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. @see aria-posinset.

number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

none

ascending

descending

other

aria-valuemax

Defines the maximum allowed value for a range widget.

number

aria-valuemin

Defines the minimum allowed value for a range widget.

number

aria-valuenow

Defines the current value for a range widget. @see aria-valuetext.

number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

string

dangerouslySetInnerHTML

{ __html: string | TrustedHTML; }

onCopy

ClipboardEventHandler<HTMLHtmlElement>

onCopyCapture

ClipboardEventHandler<HTMLHtmlElement>

onCut

ClipboardEventHandler<HTMLHtmlElement>

onCutCapture

ClipboardEventHandler<HTMLHtmlElement>

onPaste

ClipboardEventHandler<HTMLHtmlElement>

onPasteCapture

ClipboardEventHandler<HTMLHtmlElement>

onCompositionEnd

CompositionEventHandler<HTMLHtmlElement>

onCompositionEndCapture

CompositionEventHandler<HTMLHtmlElement>

onCompositionStart

CompositionEventHandler<HTMLHtmlElement>

onCompositionStartCapture

CompositionEventHandler<HTMLHtmlElement>

onCompositionUpdate

CompositionEventHandler<HTMLHtmlElement>

onCompositionUpdateCapture

CompositionEventHandler<HTMLHtmlElement>

onFocus

FocusEventHandler<HTMLHtmlElement>

onFocusCapture

FocusEventHandler<HTMLHtmlElement>

onBlur

FocusEventHandler<HTMLHtmlElement>

onBlurCapture

FocusEventHandler<HTMLHtmlElement>

onChange

FormEventHandler<HTMLHtmlElement>

onChangeCapture

FormEventHandler<HTMLHtmlElement>

onBeforeInput

FormEventHandler<HTMLHtmlElement>

onBeforeInputCapture

FormEventHandler<HTMLHtmlElement>

onInput

FormEventHandler<HTMLHtmlElement>

onInputCapture

FormEventHandler<HTMLHtmlElement>

onReset

FormEventHandler<HTMLHtmlElement>

onResetCapture

FormEventHandler<HTMLHtmlElement>

onSubmit

FormEventHandler<HTMLHtmlElement>

onSubmitCapture

FormEventHandler<HTMLHtmlElement>

onInvalid

FormEventHandler<HTMLHtmlElement>

onInvalidCapture

FormEventHandler<HTMLHtmlElement>

onLoad

ReactEventHandler<HTMLHtmlElement>

onLoadCapture

ReactEventHandler<HTMLHtmlElement>

onError

ReactEventHandler<HTMLHtmlElement>

onErrorCapture

ReactEventHandler<HTMLHtmlElement>

onKeyDown

KeyboardEventHandler<HTMLHtmlElement>

onKeyDownCapture

KeyboardEventHandler<HTMLHtmlElement>

onKeyPress

@deprecated Use `onKeyUp` or `onKeyDown` instead

KeyboardEventHandler<HTMLHtmlElement>

onKeyPressCapture

@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead

KeyboardEventHandler<HTMLHtmlElement>

onKeyUp

KeyboardEventHandler<HTMLHtmlElement>

onKeyUpCapture

KeyboardEventHandler<HTMLHtmlElement>

onAbort

ReactEventHandler<HTMLHtmlElement>

onAbortCapture

ReactEventHandler<HTMLHtmlElement>

onCanPlay

ReactEventHandler<HTMLHtmlElement>

onCanPlayCapture

ReactEventHandler<HTMLHtmlElement>

onCanPlayThrough

ReactEventHandler<HTMLHtmlElement>

onCanPlayThroughCapture

ReactEventHandler<HTMLHtmlElement>

onDurationChange

ReactEventHandler<HTMLHtmlElement>

onDurationChangeCapture

ReactEventHandler<HTMLHtmlElement>

onEmptied

ReactEventHandler<HTMLHtmlElement>

onEmptiedCapture

ReactEventHandler<HTMLHtmlElement>

onEncrypted

ReactEventHandler<HTMLHtmlElement>

onEncryptedCapture

ReactEventHandler<HTMLHtmlElement>

onEnded

ReactEventHandler<HTMLHtmlElement>

onEndedCapture

ReactEventHandler<HTMLHtmlElement>

onLoadedData

ReactEventHandler<HTMLHtmlElement>

onLoadedDataCapture

ReactEventHandler<HTMLHtmlElement>

onLoadedMetadata

ReactEventHandler<HTMLHtmlElement>

onLoadedMetadataCapture

ReactEventHandler<HTMLHtmlElement>

onLoadStart

ReactEventHandler<HTMLHtmlElement>

onLoadStartCapture

ReactEventHandler<HTMLHtmlElement>

onPause

ReactEventHandler<HTMLHtmlElement>

onPauseCapture

ReactEventHandler<HTMLHtmlElement>

onPlay

ReactEventHandler<HTMLHtmlElement>

onPlayCapture

ReactEventHandler<HTMLHtmlElement>

onPlaying

ReactEventHandler<HTMLHtmlElement>

onPlayingCapture

ReactEventHandler<HTMLHtmlElement>

onProgress

ReactEventHandler<HTMLHtmlElement>

onProgressCapture

ReactEventHandler<HTMLHtmlElement>

onRateChange

ReactEventHandler<HTMLHtmlElement>

onRateChangeCapture

ReactEventHandler<HTMLHtmlElement>

onResize

ReactEventHandler<HTMLHtmlElement>

onResizeCapture

ReactEventHandler<HTMLHtmlElement>

onSeeked

ReactEventHandler<HTMLHtmlElement>

onSeekedCapture

ReactEventHandler<HTMLHtmlElement>

onSeeking

ReactEventHandler<HTMLHtmlElement>

onSeekingCapture

ReactEventHandler<HTMLHtmlElement>

onStalled

ReactEventHandler<HTMLHtmlElement>

onStalledCapture

ReactEventHandler<HTMLHtmlElement>

onSuspend

ReactEventHandler<HTMLHtmlElement>

onSuspendCapture

ReactEventHandler<HTMLHtmlElement>

onTimeUpdate

ReactEventHandler<HTMLHtmlElement>

onTimeUpdateCapture

ReactEventHandler<HTMLHtmlElement>

onVolumeChange

ReactEventHandler<HTMLHtmlElement>

onVolumeChangeCapture

ReactEventHandler<HTMLHtmlElement>

onWaiting

ReactEventHandler<HTMLHtmlElement>

onWaitingCapture

ReactEventHandler<HTMLHtmlElement>

onAuxClick

MouseEventHandler<HTMLHtmlElement>

onAuxClickCapture

MouseEventHandler<HTMLHtmlElement>

onClick

MouseEventHandler<HTMLHtmlElement>

onClickCapture

MouseEventHandler<HTMLHtmlElement>

onContextMenu

MouseEventHandler<HTMLHtmlElement>

onContextMenuCapture

MouseEventHandler<HTMLHtmlElement>

onDoubleClick

MouseEventHandler<HTMLHtmlElement>

onDoubleClickCapture

MouseEventHandler<HTMLHtmlElement>

onDrag

DragEventHandler<HTMLHtmlElement>

onDragCapture

DragEventHandler<HTMLHtmlElement>

onDragEnd

DragEventHandler<HTMLHtmlElement>

onDragEndCapture

DragEventHandler<HTMLHtmlElement>

onDragEnter

DragEventHandler<HTMLHtmlElement>

onDragEnterCapture

DragEventHandler<HTMLHtmlElement>

onDragExit

DragEventHandler<HTMLHtmlElement>

onDragExitCapture

DragEventHandler<HTMLHtmlElement>

onDragLeave

DragEventHandler<HTMLHtmlElement>

onDragLeaveCapture

DragEventHandler<HTMLHtmlElement>

onDragOver

DragEventHandler<HTMLHtmlElement>

onDragOverCapture

DragEventHandler<HTMLHtmlElement>

onDragStart

DragEventHandler<HTMLHtmlElement>

onDragStartCapture

DragEventHandler<HTMLHtmlElement>

onDrop

DragEventHandler<HTMLHtmlElement>

onDropCapture

DragEventHandler<HTMLHtmlElement>

onMouseDown

MouseEventHandler<HTMLHtmlElement>

onMouseDownCapture

MouseEventHandler<HTMLHtmlElement>

onMouseEnter

MouseEventHandler<HTMLHtmlElement>

onMouseLeave

MouseEventHandler<HTMLHtmlElement>

onMouseMove

MouseEventHandler<HTMLHtmlElement>

onMouseMoveCapture

MouseEventHandler<HTMLHtmlElement>

onMouseOut

MouseEventHandler<HTMLHtmlElement>

onMouseOutCapture

MouseEventHandler<HTMLHtmlElement>

onMouseOver

MouseEventHandler<HTMLHtmlElement>

onMouseOverCapture

MouseEventHandler<HTMLHtmlElement>

onMouseUp

MouseEventHandler<HTMLHtmlElement>

onMouseUpCapture

MouseEventHandler<HTMLHtmlElement>

onSelect

ReactEventHandler<HTMLHtmlElement>

onSelectCapture

ReactEventHandler<HTMLHtmlElement>

onTouchCancel

TouchEventHandler<HTMLHtmlElement>

onTouchCancelCapture

TouchEventHandler<HTMLHtmlElement>

onTouchEnd

TouchEventHandler<HTMLHtmlElement>

onTouchEndCapture

TouchEventHandler<HTMLHtmlElement>

onTouchMove

TouchEventHandler<HTMLHtmlElement>

onTouchMoveCapture

TouchEventHandler<HTMLHtmlElement>

onTouchStart

TouchEventHandler<HTMLHtmlElement>

onTouchStartCapture

TouchEventHandler<HTMLHtmlElement>

onPointerDown

PointerEventHandler<HTMLHtmlElement>

onPointerDownCapture

PointerEventHandler<HTMLHtmlElement>

onPointerMove

PointerEventHandler<HTMLHtmlElement>

onPointerMoveCapture

PointerEventHandler<HTMLHtmlElement>

onPointerUp

PointerEventHandler<HTMLHtmlElement>

onPointerUpCapture

PointerEventHandler<HTMLHtmlElement>

onPointerCancel

PointerEventHandler<HTMLHtmlElement>

onPointerCancelCapture

PointerEventHandler<HTMLHtmlElement>

onPointerEnter

PointerEventHandler<HTMLHtmlElement>

onPointerLeave

PointerEventHandler<HTMLHtmlElement>

onPointerOver

PointerEventHandler<HTMLHtmlElement>

onPointerOverCapture

PointerEventHandler<HTMLHtmlElement>

onPointerOut

PointerEventHandler<HTMLHtmlElement>

onPointerOutCapture

PointerEventHandler<HTMLHtmlElement>

onGotPointerCapture

PointerEventHandler<HTMLHtmlElement>

onGotPointerCaptureCapture

PointerEventHandler<HTMLHtmlElement>

onLostPointerCapture

PointerEventHandler<HTMLHtmlElement>

onLostPointerCaptureCapture

PointerEventHandler<HTMLHtmlElement>

onScroll

UIEventHandler<HTMLHtmlElement>

onScrollCapture

UIEventHandler<HTMLHtmlElement>

onWheel

WheelEventHandler<HTMLHtmlElement>

onWheelCapture

WheelEventHandler<HTMLHtmlElement>

onAnimationStart

AnimationEventHandler<HTMLHtmlElement>

onAnimationStartCapture

AnimationEventHandler<HTMLHtmlElement>

onAnimationEnd

AnimationEventHandler<HTMLHtmlElement>

onAnimationEndCapture

AnimationEventHandler<HTMLHtmlElement>

onAnimationIteration

AnimationEventHandler<HTMLHtmlElement>

onAnimationIterationCapture

AnimationEventHandler<HTMLHtmlElement>

onToggle

ToggleEventHandler<HTMLHtmlElement>

onBeforeToggle

ToggleEventHandler<HTMLHtmlElement>

onTransitionCancel

TransitionEventHandler<HTMLHtmlElement>

onTransitionCancelCapture

TransitionEventHandler<HTMLHtmlElement>

onTransitionEnd

TransitionEventHandler<HTMLHtmlElement>

onTransitionEndCapture

TransitionEventHandler<HTMLHtmlElement>

onTransitionRun

TransitionEventHandler<HTMLHtmlElement>

onTransitionRunCapture

TransitionEventHandler<HTMLHtmlElement>

onTransitionStart

TransitionEventHandler<HTMLHtmlElement>

onTransitionStartCapture

TransitionEventHandler<HTMLHtmlElement>

itemID

string

itemProp

string

itemRef

string

itemScope

true

false

itemType

string