Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Box

The Box primitive is one of the pillars of our system. It can be any HTML element and can receive many of our token values as props. We use Box to build most of our other components.

Version 10.3.0
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/box - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Box} from '@twilio-paste/core/box';

const Component = () => (
  <Box
    as="article"
    backgroundColor="colorBackgroundBody"
    padding="space60"
    _hover={{
      backgroundColor: "colorBackgroundPrimary"
      padding: "space70"
    }}
  >
    Foo
  </Box>
);

Props

Props page anchor

Box

Box page anchor

__moz_focus_inner

Type
BoxBaseStyleProps

__webkit_calendar_picker_indicator_hover

Type
BoxBaseStyleProps

__webkit_datetime_edit

Type
BoxBaseStyleProps

__webkit_inner_spin_button

Type
BoxBaseStyleProps

__webkit_outer_spin_button

Type
BoxBaseStyleProps

_active

Type
BoxBaseStyleProps

_after

Type
BoxBaseStyleProps

_before

Type
BoxBaseStyleProps

_checked

Type
BoxBaseStyleProps

_checked_hover

Type
BoxBaseStyleProps

_disabled

Type
BoxBaseStyleProps

_disabled_focus

Type
BoxBaseStyleProps

_disabled_focus_after

Type
BoxBaseStyleProps

_even

Type
BoxBaseStyleProps

_expanded

Type
BoxBaseStyleProps

_first

Type
BoxBaseStyleProps

_focus

Type
BoxBaseStyleProps

_focus_hover

Type
BoxBaseStyleProps

_focus_placeholder

Type
BoxBaseStyleProps

_focus_selected_after

Type
BoxBaseStyleProps

_focus_selected_hover_after

Type
BoxBaseStyleProps

_focusVisible

Type
BoxBaseStyleProps

_focusWithin

Type
BoxBaseStyleProps

_grabbed

Type
BoxBaseStyleProps

_groupHover

Type
BoxBaseStyleProps

_hover

Type
BoxBaseStyleProps

_invalid

Type
BoxBaseStyleProps

_last

Type
BoxBaseStyleProps

_mixed

Type
BoxBaseStyleProps

_notFirst

Type
BoxBaseStyleProps

_notLast

Type
BoxBaseStyleProps

_odd

Type
BoxBaseStyleProps

_placeholder

Type
BoxBaseStyleProps

_pressed

Type
BoxBaseStyleProps

_pressed_active

Type
BoxBaseStyleProps

_pressed_disabled

Type
BoxBaseStyleProps

_pressed_focus

Type
BoxBaseStyleProps

_pressed_hover

Type
BoxBaseStyleProps

_readOnly

Type
BoxBaseStyleProps

_selected

Type
BoxBaseStyleProps

_selected_after

Type
BoxBaseStyleProps

_selected_focus

Type
BoxBaseStyleProps

_selected_focusVisible

Type
BoxBaseStyleProps

_selected_hover

Type
BoxBaseStyleProps

_selected_hover_after

Type
BoxBaseStyleProps

_visited

Type
BoxBaseStyleProps

-webkit-opacity

Style prop for the CSS -webkit-opacity property

Type
string

-webkit-text-fill-color

Style prop for the CSS -webkit-text-fill-color property

Type
string

accept

Same as HTML

Type
string

alignContent

Responsive prop for the CSS align-content property

Type
"center" | "inherit" | (string & {}) | "auto" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "fixed" | "-webkit-sticky" | "absolute" | "relative" | "static" | ... 10 more ... | { ...; }

alignItems

Responsive prop for the CSS align-items property

Type
"center" | "inherit" | (string & {}) | "auto" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "fixed" | "-webkit-sticky" | "absolute" | "relative" | "static" | ... 10 more ... | { ...; }

alignSelf

Responsive prop for the CSS align-self property

Type
string | (string | null)[] | { [x: string]: string | undefined; [x: number]: string | undefined; } | ("inherit" | "auto" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | ... 9 more ... | undefined)[] | { ...; }

alt

Same as HTML

Type
string

animation

Responsive style prop for the CSS animation property

Type
| Animation<string & {}> | (Animation<string & {}> | null | undefined)[] | { [x: string]: Animation<string & {}> | undefined [x: number]: Animation<string & {}> | undefined }

appearance

Responsive style prop for the CSS appearance property

Type
| Appearance | (Appearance | null | undefined)[] | { [x: string]: Appearance | undefined; [x: number]: Appearance | undefined }

as

Controls the HTML element that that will be rendered in the DOM.

Type
keyof IntrinsicElements

background

Style prop for the CSS background property

Type
StyleReset

backgroundAttachment

Responsive prop for the CSS background-attachment property

Type
| BackgroundAttachment | (BackgroundAttachment | null | undefined)[] | { [x: string]: BackgroundAttachment | undefined [x: number]: BackgroundAttachment | undefined }

backgroundColor

Responsive prop of BackgroundColor tokens for the CSS background-color property

Type
"inherit" | "none" | "colorBackground" | "colorBackgroundAvailable" | "colorBackgroundBody" | "colorBackgroundBodyInverse" | "colorBackgroundBrand" | "colorBackgroundBrandHighlight" | ... 52 more ... | { ...; }

backgroundImage

Responsive prop for the CSS background-image property

Type
| BackgroundImage | (BackgroundImage | null | undefined)[] | { [x: string]: BackgroundImage | undefined [x: number]: BackgroundImage | undefined }

backgroundPosition

Responsive prop for the CSS background-position property

Type
BackgroundPosition<0 | (string & {})> | (BackgroundPosition<0 | (string & {})> | null | undefined)[] | { [x: string]: BackgroundPosition<0 | (string & {})> | undefined; [x: number]: BackgroundPosition<...> | undefined; }

backgroundRepeat

Responsive prop for the CSS background-repeat property

Type
| BackgroundRepeat | (BackgroundRepeat | null | undefined)[] | { [x: string]: BackgroundRepeat | undefined [x: number]: BackgroundRepeat | undefined }

backgroundSize

Responsive prop for the CSS background-size property

Type
BackgroundSize<TLengthStyledSystem> | (BackgroundSize<TLengthStyledSystem> | null | undefined)[] | { ...; }

border

Style prop for the CSS border property

Type
StyleReset

borderBottom

Style prop for the CSS border-bottom property

Type
StyleReset

borderBottomColor

Responsive prop of BorderColor tokens for the CSS border-bottom-color property

Type
"inherit" | "transparent" | "colorBorder" | "colorBorderDecorative10Weaker" | "colorBorderDecorative20Weaker" | "colorBorderDecorative30Weaker" | "colorBorderDecorative40Weaker" | ... 45 more ... | { ...; }

borderBottomLeftRadius

Responsive prop of BorderRadius tokens for the CSS border-bottom-left-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderBottomRightRadius

Responsive prop of BorderRadius tokens for the CSS border-bottom-right-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderBottomStyle

Responsive prop for the CSS border-bottom-style property

Type
| BorderStyle | (BorderStyle | null | undefined)[] | { [x: string]: BorderStyle | undefined [x: number]: BorderStyle | undefined }

borderBottomWidth

Responsive prop of BorderWidth tokens for the CSS border-bottom-width property

Type
"borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | ("borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | null)[] | { ...; }

borderCollapse

Responsive prop for the CSS border-collapse property

Type
| BorderCollapse | (BorderCollapse | null | undefined)[] | { [x: string]: BorderCollapse | undefined [x: number]: BorderCollapse | undefined }

borderColor

Responsive prop of BorderColor tokens for the CSS border-color property

Type
"inherit" | "transparent" | "colorBorder" | "colorBorderDecorative10Weaker" | "colorBorderDecorative20Weaker" | "colorBorderDecorative30Weaker" | "colorBorderDecorative40Weaker" | ... 45 more ... | { ...; }

borderLeft

Style prop for the CSS border-left property

Type
StyleReset

borderLeftColor

Responsive prop of BorderColor tokens for the CSS border-left-color property

Type
"inherit" | "transparent" | "colorBorder" | "colorBorderDecorative10Weaker" | "colorBorderDecorative20Weaker" | "colorBorderDecorative30Weaker" | "colorBorderDecorative40Weaker" | ... 45 more ... | { ...; }

borderLeftStyle

Responsive prop for the CSS border-left-style property

Type
| BorderStyle | (BorderStyle | null | undefined)[] | { [x: string]: BorderStyle | undefined [x: number]: BorderStyle | undefined }

borderLeftWidth

Responsive prop of BorderWidth tokens for the CSS border-left-width property

Type
"borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | ("borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | null)[] | { ...; }

borderRadius

Responsive prop of BorderRadius tokens for the CSS border-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderRight

Style prop for the CSS border-right property

Type
StyleReset

borderRightColor

Responsive prop of BorderColor tokens for the CSS border-right-color property

Type
"inherit" | "transparent" | "colorBorder" | "colorBorderDecorative10Weaker" | "colorBorderDecorative20Weaker" | "colorBorderDecorative30Weaker" | "colorBorderDecorative40Weaker" | ... 45 more ... | { ...; }

borderRightStyle

Responsive prop for the CSS border-right-style property

Type
| BorderStyle | (BorderStyle | null | undefined)[] | { [x: string]: BorderStyle | undefined [x: number]: BorderStyle | undefined }

borderRightWidth

Responsive prop of BorderWidth tokens for the CSS border-right-width property

Type
"borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | ("borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | null)[] | { ...; }

borderSpacing

Responsive prop for the CSS border-spacing property

Type
BorderSpacing<0 | (string & {})> | (BorderSpacing<0 | (string & {})> | null | undefined)[] | { [x: string]: BorderSpacing<0 | (string & {})> | undefined; [x: number]: BorderSpacing<...> | undefined; }

borderStyle

Responsive prop for the CSS border-style property

Type
| BorderStyle | (BorderStyle | null | undefined)[] | { [x: string]: BorderStyle | undefined [x: number]: BorderStyle | undefined }

borderTop

Style prop for the CSS border-top property

Type
StyleReset

borderTopColor

Responsive prop of BorderColor tokens for the CSS border-top-color property

Type
"inherit" | "transparent" | "colorBorder" | "colorBorderDecorative10Weaker" | "colorBorderDecorative20Weaker" | "colorBorderDecorative30Weaker" | "colorBorderDecorative40Weaker" | ... 45 more ... | { ...; }

borderTopLeftRadius

Responsive prop of BorderRadius tokens for the CSS border-top-left-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderTopRightRadius

Responsive prop of BorderRadius tokens for the CSS border-top-right-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderTopStyle

Responsive prop for the CSS border-top-style property

Type
| BorderStyle | (BorderStyle | null | undefined)[] | { [x: string]: BorderStyle | undefined [x: number]: BorderStyle | undefined }

borderTopWidth

Responsive prop of BorderWidth tokens for the CSS border-top-width property

Type
"borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | ("borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | null)[] | { ...; }

borderWidth

Responsive prop of BorderWidth tokens for the CSS border-width property

Type
"borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | ("borderWidth0" | "borderWidth10" | "borderWidth20" | "borderWidth30" | "borderWidth40" | null)[] | { ...; }

bottom

Responsive prop for the CSS bottom property

Type
Bottom<TLengthStyledSystem> | (Bottom<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Bottom<TLengthStyledSystem> | undefined; [x: number]: Bottom<...> | undefined; }

boxShadow

Responsive prop of BoxShadow tokens for the CSS box-shadow property

Type
"none" | "shadow" | "shadowBorder" | "shadowBorderBottomDecorative10Weaker" | "shadowBorderBottomDecorative20Weaker" | "shadowBorderBottomDecorative30Weaker" | "shadowBorderBottomDecorative40Weaker" | ... 59 more ... | { ...; }

boxSizing

Responsive style prop for the CSS box-sizing property

Type
| BoxSizing | (BoxSizing | null | undefined)[] | { [x: string]: BoxSizing | undefined; [x: number]: BoxSizing | undefined }

clip

Responsive style prop for the CSS clip property

Type
| Clip | (Clip | null | undefined)[] | { [x: string]: Clip | undefined; [x: number]: Clip | undefined }

color

Responsive style prop of Text Color tokens for the CSS color property

Type
"inherit" | "transparent" | "colorText" | "colorTextBrandHighlight" | "colorTextBrandInverse" | "colorTextDecorative10" | "colorTextDecorative20" | "colorTextDecorative30" | ... 56 more ... | { ...; }

columnGap

Responsive prop of Space tokens for the CSS column-gap property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

content

Style prop for the CSS content property

Type
string

cursor

Responsive style prop for the CSS cursor property

Type
| Cursor | (Cursor | null | undefined)[] | { [x: string]: Cursor | undefined; [x: number]: Cursor | undefined }

datetime

Same as HTML

Type
string

disabled

Same as HTML

Type
boolean

display

Responsive style prop for the CSS display property

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

Used to set a custom element name for customization.

Type
string

flex

Responsive prop for the CSS flex property

Type
| Flex<0 | (string & {})> | (Flex<0 | (string & {})> | null | undefined)[] | { [x: string]: Flex<0 | (string & {})> | undefined [x: number]: Flex<0 | (string & {})> | undefined }

flexBasis

Responsive prop for the CSS flex-basis property

Type
FlexBasis<0 | (string & {})> | (FlexBasis<0 | (string & {})> | null | undefined)[] | { [x: string]: FlexBasis<0 | (string & {})> | undefined; [x: number]: FlexBasis<...> | undefined; }

flexDirection

Responsive prop for the CSS flex-direction property

Type
| FlexDirection | (FlexDirection | null | undefined)[] | { [x: string]: FlexDirection | undefined [x: number]: FlexDirection | undefined }

flexGrow

Responsive prop for the CSS flex-grow property

Type
| number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | (FlexGrowOptions | null)[] | { [x: string]: FlexGrowOptions | undefined [x: number]: FlexGrowOptions | undefined }

flexShrink

Responsive prop for the CSS flex-shrink property

Type
| number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | (FlexShrinkOptions | null)[] | { [x: string]: FlexShrinkOptions | undefined [x: number]: FlexShrinkOptions | undefined }

flexWrap

Responsive prop for the CSS flex-wrap property

Type
| FlexWrap | (FlexWrap | null | undefined)[] | { [x: string]: FlexWrap | undefined; [x: number]: FlexWrap | undefined }

float

Responsive style prop for the CSS float property

Type
| Float | (Float | null | undefined)[] | { [x: string]: Float | undefined; [x: number]: Float | undefined }

fontFamily

Responsive style prop of Font Family tokens for the CSS font-family property

Type
"inherit" | "fontFamilyCode" | "fontFamilyDisplay" | "fontFamilyText" | "fontFamilyTextChineseSimplified" | "fontFamilyTextChineseTraditional" | "fontFamilyTextJapanese" | "fontFamilyTextKorean" | (FontFamilyOptions | null)[] | { ...; }

fontSize

Responsive style prop of Font Size tokens for the CSS font-size property

Type
"inherit" | "100%" | "fontSize10" | "fontSize20" | "fontSize30" | "fontSize40" | "fontSize50" | "fontSize60" | "fontSize70" | "fontSize80" | "fontSize90" | "fontSize100" | "fontSize110" | ... 5 more ... | { ...; }

fontStyle

Responsive style prop for the CSS font-style property

Type
| FontStyle | (FontStyle | null | undefined)[] | { [x: string]: FontStyle | undefined; [x: number]: FontStyle | undefined }

fontVariantNumeric

Type
| FontVariantNumeric | (FontVariantNumeric | null | undefined)[] | { [x: string]: FontVariantNumeric | undefined [x: number]: FontVariantNumeric | undefined }

fontWeight

Responsive style prop of Font Weight tokens for the CSS font-weight property

Type
"inherit" | "fontWeightLight" | "fontWeightNormal" | "fontWeightMedium" | "fontWeightSemibold" | "fontWeightBold" | "fontWeightExtrabold" | (FontWeightOptions | null)[] | { ...; }

gridArea

Responsive prop for the CSS gridArea property

Type
| GridArea | (GridArea | null | undefined)[] | { [x: string]: GridArea | undefined; [x: number]: GridArea | undefined }

gridAutoColumns

Responsive prop for the CSS gridAutoColumns property

Type
GridAutoColumns<0 | (string & {})> | (GridAutoColumns<0 | (string & {})> | null | undefined)[] | { [x: string]: GridAutoColumns<0 | (string & {})> | undefined; [x: number]: GridAutoColumns<...> | undefined; }

gridAutoFlow

Responsive prop for the CSS gridAutoFlow property

Type
| GridAutoFlow | (GridAutoFlow | null | undefined)[] | { [x: string]: GridAutoFlow | undefined [x: number]: GridAutoFlow | undefined }

gridAutoRows

Responsive prop for the CSS gridAutoRows property

Type
GridAutoRows<0 | (string & {})> | (GridAutoRows<0 | (string & {})> | null | undefined)[] | { [x: string]: GridAutoRows<0 | (string & {})> | undefined; [x: number]: GridAutoRows<...> | undefined; }

gridColumn

Responsive prop for the CSS gridColumn property

Type
| GridColumn | (GridColumn | null | undefined)[] | { [x: string]: GridColumn | undefined; [x: number]: GridColumn | undefined }

gridRow

Responsive prop for the CSS gridRow property

Type
| GridRow | (GridRow | null | undefined)[] | { [x: string]: GridRow | undefined; [x: number]: GridRow | undefined }

gridTemplateAreas

Responsive prop for the CSS gridTemplateAreas property

Type
| GridTemplateAreas | (GridTemplateAreas | null | undefined)[] | { [x: string]: GridTemplateAreas | undefined [x: number]: GridTemplateAreas | undefined }

gridTemplateColumns

Responsive prop for the CSS gridTemplateColumns property

Type
GridTemplateColumns<0 | (string & {})> | (GridTemplateColumns<0 | (string & {})> | null | undefined)[] | { [x: string]: GridTemplateColumns<0 | (string & {})> | undefined; [x: number]: GridTemplateColumns<...> | undefined; }

gridTemplateRows

Responsive prop for the CSS gridTemplateRows property

Type
GridTemplateRows<0 | (string & {})> | (GridTemplateRows<0 | (string & {})> | null | undefined)[] | { [x: string]: GridTemplateRows<0 | (string & {})> | undefined; [x: number]: GridTemplateRows<...> | undefined; }

height

Responsive style prop of Size Tokens for for the CSS height property

Type
| string | number | (string & {}) | (HeightOptions | null)[] | { [x: string]: HeightOptions; [x: number]: HeightOptions }

href

Same as HTML

Type
string

inset

Responsive prop for the CSS inset property

Type
Inset<TLengthStyledSystem> | (Inset<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Inset<TLengthStyledSystem> | undefined; [x: number]: Inset<...> | undefined; }

justifyContent

Responsive prop for the CSS justify-content property

Type
"right" | "left" | "center" | "inherit" | (string & {}) | "-moz-initial" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "absolute" | "relative" | "static" | "sticky" | ... 10 more ... | { ...; }

justifyItems

Responsive prop for the CSS justify-items property

Type
"right" | "left" | "center" | "inherit" | (string & {}) | "auto" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "normal" | "end" | "start" | "flex-end" | "flex-start" | ... 5 more ... | { ...; }

justifySelf

Responsive prop for the CSS justify-self property

Type
string | ("right" | "left" | "inherit" | "auto" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "fixed" | "-webkit-sticky" | "absolute" | "relative" | "static" | ... 4 more ... | undefined)[] | { ...; } | (string | null)[] | { ...; }

label

Same as HTML

Type
string

left

Responsive prop for the CSS left property

Type
Left<TLengthStyledSystem> | (Left<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Left<TLengthStyledSystem> | undefined; [x: number]: Left<...> | undefined; }

letterSpacing

Responsive style prop for the CSS letter-spacing property

Type
LetterSpacing<0 | (string & {})> | (LetterSpacing<0 | (string & {})> | null | undefined)[] | { [x: string]: LetterSpacing<0 | (string & {})> | undefined; [x: number]: LetterSpacing<...> | undefined; }

lineHeight

Responsive style prop of Line Height tokens for the CSS line-height property

Type
"inherit" | "unset" | "lineHeight0" | "lineHeight05" | "lineHeight10" | "lineHeight20" | "lineHeight30" | "lineHeight40" | "lineHeight50" | "lineHeight60" | "lineHeight70" | ... 8 more ... | { ...; }

listStyleImage

Responsive style prop for the CSS list-style-image property

Type
| ListStyleImage | (ListStyleImage | null | undefined)[] | { [x: string]: ListStyleImage | undefined [x: number]: ListStyleImage | undefined }

listStylePosition

Responsive style prop for the CSS list-style-position property

Type
| ListStylePosition | (ListStylePosition | null | undefined)[] | { [x: string]: ListStylePosition | undefined [x: number]: ListStylePosition | undefined }

listStyleType

Responsive style prop for the CSS list-style-type property

Type
| ListStyleType | (ListStyleType | null | undefined)[] | { [x: string]: ListStyleType | undefined [x: number]: ListStyleType | undefined }

margin

Responsive prop of Space tokens for the CSS margin property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginBottom

Responsive prop of Space tokens for the CSS margin-bottom property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginLeft

Responsive prop of Space tokens for the CSS margin-left property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginRight

Responsive prop of Space tokens for the CSS margin-right property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginTop

Responsive prop of Space tokens for the CSS margin-top property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginX

Responsive prop of Space tokens for the CSS margin-left and margin-right properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginY

Responsive prop of Space tokens for the CSS margin-top and margin-bottom properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

maxHeight

Responsive style prop of Size Tokens for for the CSS max-height property

Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }

maxWidth

Responsive style prop of Size Tokens for for the CSS max-width property

Type
| string | number | (string & {}) | (MaxWidthOptions | null)[] | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }

minHeight

Responsive style prop of Size Tokens for for the CSS min-height property

Type
| string | number | (string & {}) | (MinHeightOptions | null)[] | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }

minWidth

Responsive style prop of Size Tokens for for the CSS min-width property

Type
| string | number | (string & {}) | (MinWidthOptions | null)[] | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }

multiple

Same as HTML

Type
boolean

objectFit

Responsive style prop for the CSS object-fit property

Type
| ObjectFit | (ObjectFit | null | undefined)[] | { [x: string]: ObjectFit | undefined; [x: number]: ObjectFit | undefined }

objectPosition

Responsive style prop for the CSS object-position property

Type
ObjectPosition<0 | (string & {})> | (ObjectPosition<0 | (string & {})> | null | undefined)[] | { [x: string]: ObjectPosition<0 | (string & {})> | undefined; [x: number]: ObjectPosition<...> | undefined; }

opacity

Responsive style prop for the CSS opacity property

Type
| Opacity | (Opacity | null | undefined)[] | { [x: string]: Opacity | undefined; [x: number]: Opacity | undefined }

order

Responsive prop for the CSS order property

Type
| number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | (OrderOptions | null)[] | { [x: string]: OrderOptions | undefined [x: number]: OrderOptions | undefined }

outline

Responsive style prop for the CSS outline property

Type
Outline<0 | (string & {})> | (Outline<0 | (string & {})> | null | undefined)[] | { [x: string]: Outline<0 | (string & {})> | undefined; [x: number]: Outline<...> | undefined; }

overflow

Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }

overflowWrap

Responsive style prop for the CSS overflow-wrap property

Type
| OverflowWrap | (OverflowWrap | null | undefined)[] | { [x: string]: OverflowWrap | undefined [x: number]: OverflowWrap | undefined }

overflowX

Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }

overflowY

Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }

padding

Responsive prop of Space tokens for the CSS padding property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingBottom

Responsive prop of Space tokens for the CSS padding-bottom property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingLeft

Responsive prop of Space tokens for the CSS padding-left property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingRight

Responsive prop of Space tokens for the CSS padding-right property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingTop

Responsive prop of Space tokens for the CSS padding-top property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingX

Responsive prop of Space tokens for the CSS padding-left and padding-right properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingY

Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

pointerEvents

Responsive style prop for the CSS pointer-events property

Type
| PointerEvents | (PointerEvents | null | undefined)[] | { [x: string]: PointerEvents | undefined [x: number]: PointerEvents | undefined }

position

Responsive prop for the CSS position property

Type
| Position | (Position | null | undefined)[] | { [x: string]: Position | undefined; [x: number]: Position | undefined }

rel

Same as HTML

Type
string

resize

Responsive style prop for the CSS resize property

Type
| Resize | (Resize | null | undefined)[] | { [x: string]: Resize | undefined; [x: number]: Resize | undefined }

right

Responsive prop for the CSS right property

Type
Right<TLengthStyledSystem> | (Right<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Right<TLengthStyledSystem> | undefined; [x: number]: Right<...> | undefined; }

rowGap

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

size

Responsive style prop of Size Tokens for for the CSS width and height properties

Type
string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }

src

Same as HTML

Type
string

tableLayout

Responsive style prop for the CSS table-layout property

Type
| TableLayout | (TableLayout | null | undefined)[] | { [x: string]: TableLayout | undefined [x: number]: TableLayout | undefined }

target

Same as HTML

Type
string

textAlign

Responsive style prop for the CSS text-align property

Type
| TextAlign | (TextAlign | null | undefined)[] | { [x: string]: TextAlign | undefined; [x: number]: TextAlign | undefined }

textDecoration

Responsive style prop for the CSS text-decoration property

Type
TextDecoration<0 | (string & {})> | (TextDecoration<0 | (string & {})> | null | undefined)[] | { [x: string]: TextDecoration<0 | (string & {})> | undefined; [x: number]: TextDecoration<...> | undefined; }

textOverflow

Responsive style prop for the CSS text-overflow property

Type
| TextOverflow | (TextOverflow | null | undefined)[] | { [x: string]: TextOverflow | undefined [x: number]: TextOverflow | undefined }

textShadow

Style prop for the CSS text-shadow property

Type
StyleReset

textTransform

Responsive style prop for the CSS text-transform property. Avoid using this prop if possible, as it can have implications for screen readers and internationalization.

Type
| TextTransform | (TextTransform | null | undefined)[] | { [x: string]: TextTransform | undefined [x: number]: TextTransform | undefined }

top

Responsive prop for the CSS top property

Type
Top<TLengthStyledSystem> | (Top<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Top<TLengthStyledSystem> | undefined; [x: number]: Top<...> | undefined; }

transform

Responsive style prop for the CSS transform property

Type
| Transform | (Transform | null | undefined)[] | { [x: string]: Transform | undefined; [x: number]: Transform | undefined }

transformOrigin

Responsive style prop for the CSS transform-origin property

Type
TransformOrigin<0 | (string & {})> | (TransformOrigin<0 | (string & {})> | null | undefined)[] | { [x: string]: TransformOrigin<0 | (string & {})> | undefined; [x: number]: TransformOrigin<...> | undefined; }

transition

Responsive style prop for the CSS transition property

Type
Transition<string & {}> | (Transition<string & {}> | null | undefined)[] | { [x: string]: Transition<string & {}> | undefined; [x: number]: Transition<...> | undefined; }

transitionDelay

Responsive style prop for the CSS transition-delay property

Type
TransitionDelay<string & {}> | (TransitionDelay<string & {}> | null | undefined)[] | { [x: string]: TransitionDelay<string & {}> | undefined; [x: number]: TransitionDelay<...> | undefined; }

type

Same as HTML

Type
string

userSelect

Responsive style prop for the CSS user-select property

Type
| UserSelect | (UserSelect | null | undefined)[] | { [x: string]: UserSelect | undefined; [x: number]: UserSelect | undefined }

variant

Used to style custom variants via customization.

Type
string

verticalAlign

Responsive style prop for the CSS vertical-align property

Type
VerticalAlign<0 | (string & {})> | (VerticalAlign<0 | (string & {})> | null | undefined)[] | { [x: string]: VerticalAlign<0 | (string & {})> | undefined; [x: number]: VerticalAlign<...> | undefined; }

visibility

Responsive style prop for the CSS visibility property

Type
| Visibility | (Visibility | null | undefined)[] | { [x: string]: Visibility | undefined; [x: number]: Visibility | undefined }

whiteSpace

Responsive style prop for the CSS white-space property

Type
| WhiteSpace | (WhiteSpace | null | undefined)[] | { [x: string]: WhiteSpace | undefined; [x: number]: WhiteSpace | undefined }

width

Responsive style prop of Size Tokens for the CSS width property

Type
| string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions }

willChange

Responsive style prop for the CSS will-change property

Type
| WillChange | (WillChange | null | undefined)[] | { [x: string]: WillChange | undefined; [x: number]: WillChange | undefined }

wordBreak

Responsive style prop for the CSS word-break property

Type
| WordBreak | (WordBreak | null | undefined)[] | { [x: string]: WordBreak | undefined; [x: number]: WordBreak | undefined }

wordWrap

Responsive style prop for the CSS word-wrap property

Type
| WordWrap | (WordWrap | null | undefined)[] | { [x: string]: WordWrap | undefined; [x: number]: WordWrap | undefined }

zIndex

Responsive prop of ZIndex tokens for the CSS z-index property

Type
"zIndex0" | "zIndex10" | "zIndex20" | "zIndex30" | "zIndex40" | "zIndex50" | "zIndex60" | "zIndex70" | "zIndex80" | "zIndex90" | ("zIndex0" | "zIndex10" | "zIndex20" | "zIndex30" | ... 6 more ... | null)[] | { ...; }