Interface SubmitButtonProps

Hierarchy

  • ButtonProps
    • SubmitButtonProps

Properties

__css? _active? _activeLink? _activeStep? _after? _autofill? _before? _checked? _dark? _disabled? _empty? _even? _expanded? _first? _firstLetter? _focus? _focusVisible? _focusWithin? _fullScreen? _grabbed? _groupActive? _groupChecked? _groupDisabled? _groupFocus? _groupFocusVisible? _groupFocusWithin? _groupHover? _groupInvalid? _hidden? _highlighted? _hover? _indeterminate? _invalid? _last? _light? _loading? _ltr? _mediaDark? _mediaReduceMotion? _notFirst? _notLast? _odd? _peerActive? _peerChecked? _peerDisabled? _peerFocus? _peerFocusVisible? _peerFocusWithin? _peerHover? _peerInvalid? _peerPlaceholderShown? _placeholder? _placeholderShown? _pressed? _readOnly? _rtl? _selected? _selection? _valid? _visited? alignContent? alignItems? alignSelf? animation? appearance? apply? aria-activedescendant? aria-atomic? aria-autocomplete? aria-busy? aria-checked? aria-colcount? aria-colindex? aria-colspan? aria-controls? aria-current? aria-describedby? aria-details? aria-disabled? aria-dropeffect? aria-errormessage? aria-expanded? aria-flowto? aria-grabbed? aria-haspopup? aria-hidden? aria-invalid? aria-keyshortcuts? aria-label? aria-labelledby? aria-level? aria-live? aria-modal? aria-multiline? aria-multiselectable? aria-orientation? aria-owns? aria-placeholder? aria-posinset? aria-pressed? aria-readonly? aria-relevant? aria-required? aria-roledescription? aria-rowcount? aria-rowindex? aria-rowspan? aria-selected? aria-setsize? aria-sort? aria-valuemax? aria-valuemin? aria-valuenow? aria-valuetext? backdropBlur? backdropBrightness? backdropContrast? backdropFilter? backdropHueRotate? backdropInvert? backdropSaturate? background? backgroundAttachment? backgroundBlendMode? backgroundClip? backgroundColor? backgroundImage? backgroundPosition? backgroundRepeat? backgroundSize? bg? bgAttachment? bgBlendMode? bgClip? bgColor? bgGradient? bgImage? bgImg? bgPos? bgPosition? bgRepeat? bgSize? blendMode? blur? border? borderBottom? borderBottomColor? borderBottomLeftRadius? borderBottomRadius? borderBottomRightRadius? borderBottomStyle? borderBottomWidth? borderColor? borderEndRadius? borderInlineEndRadius? borderInlineStartRadius? borderLeft? borderLeftColor? borderLeftRadius? borderLeftStyle? borderLeftWidth? borderRadius? borderRight? borderRightColor? borderRightRadius? borderRightStyle? borderRightWidth? borderStartRadius? borderStyle? borderTop? borderTopColor? borderTopLeftRadius? borderTopRadius? borderTopRightRadius? borderTopStyle? borderTopWidth? borderWidth? borderX? borderY? bottom? boxDecorationBreak? boxShadow? boxSize? boxSizing? brightness? clipPath? color? columnGap? contrast? control? css? cursor? display? dropShadow? fill? filter? flex? flexBasis? flexDir? flexDirection? flexFlow? flexGrow? flexShrink? flexWrap? float? fontFamily? fontSize? fontStyle? fontWeight? gap? gridArea? gridAutoColumns? gridAutoFlow? gridAutoRows? gridColumn? gridColumnEnd? gridColumnGap? gridColumnStart? gridGap? gridRow? gridRowEnd? gridRowGap? gridRowStart? gridTemplate? gridTemplateAreas? gridTemplateColumns? gridTemplateRows? h? height? hideBelow? hideFrom? hueRotate? iconSpacing? inputMode? inset? insetEnd? insetInlineEnd? insetStart? insetX? insetY? invert? is? isActive? isDisabled? isLoading? isTruncated? isolation? justifyContent? justifyItems? justifySelf? layerStyle? left? leftIcon? letterSpacing? lineHeight? listStyleImage? listStyleImg? listStylePos? listStylePosition? loadingText? m? margin? marginBottom? marginEnd? marginInlineEnd? marginInlineStart? marginLeft? marginRight? marginStart? marginTop? marginX? marginY? maxH? maxHeight? maxW? maxWidth? mb? me? minH? minHeight? minW? minWidth? mixBlendMode? ml? mr? ms? mt? mx? my? noOfLines? objectFit? objectPosition? onKeyPress? onKeyPressCapture? opacity? order? outline? outlineColor? outlineOffset? overflow? overflowWrap? overflowX? overflowY? overscroll? overscrollBehavior? overscrollBehaviorX? overscrollBehaviorY? overscrollX? overscrollY? p? padding? paddingBottom? paddingEnd? paddingInlineEnd? paddingInlineStart? paddingLeft? paddingRight? paddingStart? paddingTop? paddingX? paddingY? pb? pe? pl? placeContent? placeItems? placeSelf? pointerEvents? pos? position? pr? ps? pt? px? py? resize? right? rightIcon? ring? ringColor? ringInset? ringOffset? ringOffsetColor? rotate? rounded? roundedBottom? roundedBottomLeft? roundedBottomRight? roundedEnd? roundedLeft? roundedRight? roundedStart? roundedTop? roundedTopLeft? roundedTopRight? rowGap? saturate? scale? scaleX? scaleY? shadow? skewX? skewY? spinner? spinnerPlacement? srOnly? stroke? sx? textAlign? textColor? textDecor? textDecoration? textDecorationColor? textDecorationLine? textDecorationStyle? textDecorationThickness? textIndent? textOverflow? textShadow? textStyle? textTransform? textUnderlineOffset? top? transform? transformOrigin? transition? transitionDelay? transitionDuration? transitionProperty? transitionTimingFunction? translateX? translateY? userSelect? verticalAlign? visibility? w? whiteSpace? width? willChange? wordBreak? zIndex?

Properties

Optional Private __css

__css?: SystemStyleObject

Used for internal css management

Optional _active

_active?: SystemStyleObject

Styles for CSS Selector &:active

Optional _activeLink

_activeLink?: SystemStyleObject

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

Optional _activeStep

_activeStep?: SystemStyleObject

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

Optional _after

_after?: SystemStyleObject

Styles for CSS selector &::after

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

Example

<Box _after={{content:`""` }}/>

Optional _autofill

_autofill?: SystemStyleObject

Styles for CSS Selector &:-webkit-autofill

Optional _before

_before?: SystemStyleObject

Styles for CSS selector &::before

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

Example

<Box _before={{content:`""` }}/>

Optional _checked

_checked?: SystemStyleObject

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

  • CSS selector &[aria-checked=true]

Optional _dark

_dark?: SystemStyleObject

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

Optional _disabled

_disabled?: SystemStyleObject

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

  • &[aria-disabled=true]
  • &:disabled
  • &[data-disabled]
  • &[disabled]

Optional _empty

_empty?: SystemStyleObject

Styles for CSS selector &:empty

Optional _even

_even?: SystemStyleObject

Styles for CSS Selector &:nth-child(even)

Optional _expanded

_expanded?: SystemStyleObject

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

  • CSS selector &[aria-expanded=true]

Optional _first

_first?: SystemStyleObject

Styles for CSS Selector &:first-of-type

Optional _firstLetter

_firstLetter?: SystemStyleObject

Styles for CSS selector &::first-letter

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>

Optional _focus

_focus?: SystemStyleObject

Styles for CSS selector &:focus

Optional _focusVisible

_focusVisible?: SystemStyleObject

Styles to apply when this element has received focus via tabbing

  • CSS Selector &:focus-visible

Optional _focusWithin

_focusWithin?: SystemStyleObject

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

  • CSS Selector &:focus-within

Optional _fullScreen

_fullScreen?: SystemStyleObject

Styles for CSS Selector &:fullscreen.

Optional _grabbed

_grabbed?: SystemStyleObject

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

  • CSS selector &[aria-grabbed=true]

Optional _groupActive

_groupActive?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is active

Optional _groupChecked

_groupChecked?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is checked

Optional _groupDisabled

_groupDisabled?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is disabled

Optional _groupFocus

_groupFocus?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is focused

Optional _groupFocusVisible

_groupFocusVisible?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group has visible focus

Optional _groupFocusWithin

_groupFocusWithin?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group has focus within

Optional _groupHover

_groupHover?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is hovered

Optional _groupInvalid

_groupInvalid?: SystemStyleObject

Styles to apply when a parent element with .group, data-group or role=group is invalid

Optional _hidden

_hidden?: SystemStyleObject

Styles for CSS Selector [hidden=true]

Optional _highlighted

_highlighted?: SystemStyleObject

Styles for the highlighted state.

Optional _hover

_hover?: SystemStyleObject

Styles for CSS selector &:hover

Optional _indeterminate

_indeterminate?: SystemStyleObject

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

  • CSS selector &[aria-checked=mixed]

Optional _invalid

_invalid?: SystemStyleObject

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

  • CSS selector &[aria-invalid=true]

Optional _last

_last?: SystemStyleObject

Styles for CSS Selector &:last-of-type

Optional _light

_light?: SystemStyleObject

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

Optional _loading

_loading?: SystemStyleObject

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

Optional _ltr

_ltr?: SystemStyleObject

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

Optional _mediaDark

_mediaDark?: SystemStyleObject

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.

Optional _mediaReduceMotion

_mediaReduceMotion?: SystemStyleObject

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.

Optional _notFirst

_notFirst?: SystemStyleObject

Styles for CSS Selector &:not(:first-of-type)

Optional _notLast

_notLast?: SystemStyleObject

Styles for CSS Selector &:not(:last-of-type)

Optional _odd

_odd?: SystemStyleObject

Styles for CSS Selector &:nth-child(odd)

Optional _peerActive

_peerActive?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is active

Optional _peerChecked

_peerChecked?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is checked

Optional _peerDisabled

_peerDisabled?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is disabled

Optional _peerFocus

_peerFocus?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is focused

Optional _peerFocusVisible

_peerFocusVisible?: SystemStyleObject

Styles to apply when a sibling element with .peeror data-peer has visible focus

Optional _peerFocusWithin

_peerFocusWithin?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer has focus within

Optional _peerHover

_peerHover?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is hovered

Optional _peerInvalid

_peerInvalid?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer is invalid

Optional _peerPlaceholderShown

_peerPlaceholderShown?: SystemStyleObject

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

Optional _placeholder

_placeholder?: SystemStyleObject

Styles for CSS Selector &::placeholder.

Optional _placeholderShown

_placeholderShown?: SystemStyleObject

Styles for CSS Selector &:placeholder-shown.

Optional _pressed

_pressed?: SystemStyleObject

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

Optional _readOnly

_readOnly?: SystemStyleObject

Styles for CSS Selector &:readonly

Optional _rtl

_rtl?: SystemStyleObject

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

Optional _selected

_selected?: SystemStyleObject

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

  • CSS selector &[aria-selected=true]

Optional _selection

_selection?: SystemStyleObject

Styles for CSS Selector &::selection

Optional _valid

_valid?: SystemStyleObject

Styles for the valid state

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

Optional _visited

_visited?: SystemStyleObject

Styles for CSS Selector &:visited

Optional alignContent

alignContent?: ResponsiveValue<AlignContent>

The CSS align-content property.

It defines the distribution of space between and around content items along a flexbox cross-axis or a grid's block axis.

See

Mozilla Docs

Optional alignItems

alignItems?: ResponsiveValue<AlignItems>

The CSS align-items property.

It defines the align-self value on all direct children as a group.

  • In Flexbox, it controls the alignment of items on the Cross Axis.
  • In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

See

Mozilla Docs

Optional alignSelf

alignSelf?: ResponsiveValue<AlignSelf>

The CSS align-self property.

It works like align-items, but applies only to a single flexbox item, instead of all of them.

See

Mozilla Docs

Optional animation

animation?: ResponsiveValue<Animation<string & {}>>

The CSS animation property

Optional appearance

appearance?: ResponsiveValue<Appearance>

The CSS appearance property

Optional apply

apply?: ResponsiveValue<string>

Apply theme-aware style objects in theme

Example

<Box apply="styles.h3">This is a div</Box>

This will apply styles defined in theme.styles.h3

Optional aria-activedescendant

aria-activedescendant?: string

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

Optional aria-atomic

aria-atomic?: Booleanish

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.

Optional aria-autocomplete

aria-autocomplete?: "none" | "both" | "inline" | "list"

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.

Optional aria-busy

aria-busy?: Booleanish

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.

Optional aria-checked

aria-checked?: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

See

  • aria-pressed
  • aria-selected.

Optional aria-colcount

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

See

aria-colindex.

Optional aria-colindex

aria-colindex?: number

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
  • aria-colspan.

Optional aria-colspan

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

See

  • aria-colindex
  • aria-rowspan.

Optional aria-controls

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

See

aria-owns.

Optional aria-current

aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"

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

Optional aria-describedby

aria-describedby?: string

Identifies the element (or elements) that describes the object.

See

aria-labelledby

Optional aria-details

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

See

aria-describedby.

Optional aria-disabled

aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

See

  • aria-hidden
  • aria-readonly.

Optional aria-dropeffect

aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

Deprecated

in ARIA 1.1

Optional aria-errormessage

aria-errormessage?: string

Identifies the element that provides an error message for the object.

See

  • aria-invalid
  • aria-describedby.

Optional aria-expanded

aria-expanded?: Booleanish

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

Optional aria-flowto

aria-flowto?: string

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.

Optional aria-grabbed

aria-grabbed?: Booleanish

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

Deprecated

in ARIA 1.1

Optional aria-haspopup

aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree"

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

Optional aria-hidden

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

See

aria-disabled.

Optional aria-invalid

aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

See

aria-errormessage.

Optional aria-keyshortcuts

aria-keyshortcuts?: string

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

Optional aria-label

aria-label?: string

Defines a string value that labels the current element.

See

aria-labelledby.

Optional aria-labelledby

aria-labelledby?: string

Identifies the element (or elements) that labels the current element.

See

aria-describedby.

Optional aria-level

aria-level?: number

Defines the hierarchical level of an element within a structure.

Optional aria-live

aria-live?: "off" | "assertive" | "polite"

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.

Optional aria-modal

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

Optional aria-multiline

aria-multiline?: Booleanish

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

Optional aria-multiselectable

aria-multiselectable?: Booleanish

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

Optional aria-orientation

aria-orientation?: "horizontal" | "vertical"

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

Optional aria-owns

aria-owns?: string

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.

Optional aria-placeholder

aria-placeholder?: string

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.

Optional aria-posinset

aria-posinset?: number

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.

Optional aria-pressed

aria-pressed?: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.

See

  • aria-checked
  • aria-selected.

Optional aria-readonly

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.

See

aria-disabled.

Optional aria-relevant

aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

See

aria-atomic.

Optional aria-required

aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

Optional aria-roledescription

aria-roledescription?: string

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

Optional aria-rowcount

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

See

aria-rowindex.

Optional aria-rowindex

aria-rowindex?: number

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
  • aria-rowspan.

Optional aria-rowspan

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

See

  • aria-rowindex
  • aria-colspan.

Optional aria-selected

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

See

  • aria-checked
  • aria-pressed.

Optional aria-setsize

aria-setsize?: number

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.

Optional aria-sort

aria-sort?: "none" | "ascending" | "descending" | "other"

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

Optional aria-valuemax

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

Optional aria-valuemin

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

Optional aria-valuenow

aria-valuenow?: number

Defines the current value for a range widget.

See

aria-valuetext.

Optional aria-valuetext

aria-valuetext?: string

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

Optional backdropBlur

backdropBlur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">

Sets the backdrop-blur filter value of an element. Value is assigned to --chakra-backdrop-blur css variable

Optional backdropBrightness

backdropBrightness?: ResponsiveValue<Length>

Sets the backdrop-brightness filter value of an element. Value is assigned to --chakra-backdrop-brightness css variable

Optional backdropContrast

backdropContrast?: ResponsiveValue<Length>

Sets the backdrop-contrast filter value of an element. Value is assigned to --chakra-backdrop-contrast css variable

Optional backdropFilter

backdropFilter?: ResponsiveValue<"auto" | BackdropFilter>

The CSS backdrop-filter property. When set to auto, you allow Chakra UI to define the color based on the backdrop filter style props (backdropBlur, backdropSaturate, etc.)

Optional backdropHueRotate

backdropHueRotate?: ResponsiveValue<Length>

Sets the backdrop-hue-rotate filter value of an element. Value is assigned to --chakra-backdrop-hue-rotate css variable

Optional backdropInvert

backdropInvert?: ResponsiveValue<Length>

Sets the backdrop-invert filter value of an element. Value is assigned to --chakra-backdrop-invert css variable

Optional backdropSaturate

backdropSaturate?: ResponsiveValue<Length>

Sets the backdrop-saturate filter value of an element. Value is assigned to --chakra-backdrop-saturate css variable

Optional background

background?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS background property

Optional backgroundAttachment

backgroundAttachment?: ResponsiveValue<BackgroundAttachment>

The CSS background-attachment property

Optional backgroundBlendMode

backgroundBlendMode?: ResponsiveValue<BackgroundBlendMode>

The CSS background-blend-mode property

Optional backgroundClip

backgroundClip?: ResponsiveValue<"text" | BackgroundClip>

The CSS background-clip property

Optional backgroundColor

backgroundColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS background-color property

Optional backgroundImage

backgroundImage?: ResponsiveValue<string | string & {}>

The CSS background-image property

Optional backgroundPosition

backgroundPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS background-position property

Optional backgroundRepeat

backgroundRepeat?: ResponsiveValue<BackgroundRepeat>

The CSS background-repeat property

Optional backgroundSize

backgroundSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">

The CSS background-size property

Optional bg

bg?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS background property

Optional bgAttachment

bgAttachment?: ResponsiveValue<BackgroundAttachment>

The CSS background-attachment property

Optional bgBlendMode

bgBlendMode?: ResponsiveValue<BackgroundBlendMode>

The CSS background-blend-mode property

Optional bgClip

bgClip?: ResponsiveValue<"text" | BackgroundClip>

The CSS background-clip property

Optional bgColor

bgColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS background-color property

Optional bgGradient

bgGradient?: ResponsiveValue<string | string & {}>

The background-gradient shorthand

Optional bgImage

bgImage?: ResponsiveValue<string | string & {}>

The CSS background-image property

Optional bgImg

bgImg?: ResponsiveValue<string | string & {}>

The CSS background-image property

Optional bgPos

bgPos?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS background-position property

Optional bgPosition

bgPosition?: ResponsiveValue<number | "center" | "top" | "right" | "bottom" | "left" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">

The CSS background-position property

Optional bgRepeat

bgRepeat?: ResponsiveValue<BackgroundRepeat>

The CSS background-repeat property

Optional bgSize

bgSize?: ResponsiveValue<number | string & {} | "contain" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "cover">

The CSS background-size property

Optional blendMode

blendMode?: ResponsiveValue<MixBlendMode>

The blend-mode property

Optional blur

blur?: ResponsiveValue<{} | "base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl">

Sets the blur filter value of an element. Value is assigned to --chakra-filter css variable

Optional border

border?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border property

Optional borderBottom

borderBottom?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border-bottom property

Optional borderBottomColor

borderBottomColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderBottomColor>

The CSS border-bottom-color property

Optional borderBottomLeftRadius

borderBottomLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-bottom-left-radius property

Optional borderBottomRadius

borderBottomRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-bottom-radius property

Optional borderBottomRightRadius

borderBottomRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-bottom-right-radius property

Optional borderBottomStyle

borderBottomStyle?: ResponsiveValue<BorderBottomStyle>

The CSS border-bottom-style property

Optional borderBottomWidth

borderBottomWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">

The CSS border-bottom-width property

Optional borderColor

borderColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>

The CSS border-color property

Optional borderEndRadius

borderEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

When direction is ltr, borderEndRadius is equivalent to borderRightRadius. When direction is rtl, borderEndRadius is equivalent to borderLeftRadius.

Optional borderInlineEndRadius

borderInlineEndRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

When direction is ltr, borderInlineEndRadius is equivalent to borderRightRadius. When direction is rtl, borderInlineEndRadius is equivalent to borderLeftRadius.

Optional borderInlineStartRadius

borderInlineStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

When direction is ltr, borderInlineStartRadius is equivalent to borderLeftRadius. When direction is rtl, borderInlineStartRadius is equivalent to borderRightRadius.

Optional borderLeft

borderLeft?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border-left property

Optional borderLeftColor

borderLeftColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderLeftColor>

The CSS border-left-color property

Optional borderLeftRadius

borderLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-left-radius property

Optional borderLeftStyle

borderLeftStyle?: ResponsiveValue<BorderLeftStyle>

The CSS border-left-style property

Optional borderLeftWidth

borderLeftWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">

The CSS border-left-width property

Optional borderRadius

borderRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-radius property

Optional borderRight

borderRight?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border-right property

Optional borderRightColor

borderRightColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderRightColor>

The CSS border-right-color property

Optional borderRightRadius

borderRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-right-radius property

Optional borderRightStyle

borderRightStyle?: ResponsiveValue<BorderRightStyle>

The CSS border-right-styles property

Optional borderRightWidth

borderRightWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">

The CSS border-right-width property

Optional borderStartRadius

borderStartRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

When direction is ltr, borderStartRadius is equivalent to borderLeftRadius. When direction is rtl, borderStartRadius is equivalent to borderRightRadius.

Optional borderStyle

borderStyle?: ResponsiveValue<BorderStyle>

The CSS border-style property

Optional borderTop

borderTop?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border-top property

Optional borderTopColor

borderTopColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | BorderTopColor>

The CSS border-top-color property

Optional borderTopLeftRadius

borderTopLeftRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-top-left-radius property

Optional borderTopRadius

borderTopRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-top-radius property

Optional borderTopRightRadius

borderTopRightRadius?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-top-right-radius property

Optional borderTopStyle

borderTopStyle?: ResponsiveValue<BorderTopStyle>

The CSS border-top-style property

Optional borderTopWidth

borderTopWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">

The CSS border-top-width property

Optional borderWidth

borderWidth?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "medium" | "thick">

The CSS border-width property

Optional borderX

borderX?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border-right and border-left property

Optional borderY

borderY?: ResponsiveValue<number | "inset" | "hidden" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "thin" | "medium" | "thick" | "dashed" | "dotted" | "double" | "groove" | "outset" | "ridge" | "solid" | "1px" | "2px" | "4px" | "8px">

The CSS border-top and border-bottom property

Optional bottom

bottom?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS bottom property

Optional boxDecorationBreak

boxDecorationBreak?: ResponsiveValue<BoxDecorationBreak>

The CSS box-decoration property

Optional boxShadow

boxShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">

The box-shadow property

Optional boxSize

boxSize?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">

The CSS width and height property

Optional boxSizing

boxSizing?: BoxSizing

The CSS box-sizing property

Optional brightness

brightness?: ResponsiveValue<Length>

Sets the brightness filter value of an element. Value is assigned to --chakra-brightness css variable

Optional clipPath

clipPath?: ResponsiveValue<ClipPath>

The CSS clip-path property.

It creates a clipping region that sets what part of an element should be shown.

Optional color

color?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS color property

Optional columnGap

columnGap?: ResponsiveValue<ColumnGap<Length>>

The CSS column-gap property.

It sets the size of the gap (gutter) between an element's columns.

See

Mozilla Docs

Optional contrast

contrast?: ResponsiveValue<Length>

Sets the contrast filter value of an element. Value is assigned to --chakra-contrast css variable

Optional control

control?: Control<any, any>

The control passed down from react-hook-form. Only required if not using FormProvider

Optional css

css?: Interpolation<{}>

The emotion's css style object

Optional cursor

cursor?: ResponsiveValue<Cursor>

The CSS cursor property

Optional display

display?: ResponsiveValue<Display>

The CSS display property

Optional dropShadow

dropShadow?: ResponsiveValue<"base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">

Sets the drop-shadow filter value of an element. Value is assigned to --chakra-drop-shadow css variable

Optional fill

fill?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS fill property for icon svgs and paths

Optional filter

filter?: ResponsiveValue<Filter | "auto">

The CSS filter property. When set to auto, you allow Chakra UI to define the color based on the filter style props (blur, saturate, etc.)

Optional flex

flex?: ResponsiveValue<Flex<Length>>

The CSS flex property.

It defines how a flex item will grow or shrink to fit the space available in its flex container.

See

Mozilla Docs

Optional flexBasis

flexBasis?: ResponsiveValue<FlexBasis<Length>>

The CSS flex-basis property.

It defines the initial main size of a flex item.

See

Mozilla Docs

Optional flexDir

flexDir?: ResponsiveValue<FlexDirection>

The CSS flex-direction property.

It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

See

Mozilla Docs

Optional flexDirection

flexDirection?: ResponsiveValue<FlexDirection>

The CSS flex-direction property.

It defines how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

See

Mozilla Docs

Optional flexFlow

flexFlow?: ResponsiveValue<FlexFlow>

The CSS flex-flow property.

It is a shorthand property for flex-direction and flex-wrap. It specifies the direction of a flex container, as well as its wrapping behavior.

See

Mozilla Docs

Optional flexGrow

flexGrow?: ResponsiveValue<FlexGrow>

The CSS flex-grow property.

It defines how much a flexbox item should grow if there's space available.

See

Mozilla Docs

Optional flexShrink

flexShrink?: ResponsiveValue<FlexShrink>

The CSS flex-shrink property.

It defines how much a flexbox item should shrink if there's not enough space available.

See

Mozilla Docs

Optional flexWrap

flexWrap?: ResponsiveValue<FlexWrap>

The CSS flex-wrap property.

It defines whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

See

Mozilla Docs

Optional float

float?: ResponsiveValue<Float>

The CSS float property

Optional fontFamily

fontFamily?: ResponsiveValue<"body" | FontFamily | "heading" | "mono">

The CSS font-family property

Optional fontSize

fontSize?: ResponsiveValue<number | "small" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl">

The CSS font-size property

Optional fontStyle

fontStyle?: ResponsiveValue<FontStyle>

The CSS font-style property

Optional fontWeight

fontWeight?: ResponsiveValue<number | "bold" | string & {} | "black" | "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "extrabold">

The CSS font-weight property

Optional gap

gap?: ResponsiveValue<Gap<Length>>

The CSS gap property.

It defines the gap between items in both flex and grid contexts.

See

Mozilla Docs

Optional gridArea

gridArea?: ResponsiveValue<GridArea>

The CSS grid-areas property.

It specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

See

Mozilla Docs

Optional gridAutoColumns

gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>

The CSS grid-auto-columns property.

It specifies the size of an implicitly-created grid column track or pattern of tracks.

See

Mozilla Docs

Optional gridAutoFlow

gridAutoFlow?: ResponsiveValue<GridAutoFlow>

The CSS grid-auto-flow property

It controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

See

Mozilla Docs

Optional gridAutoRows

gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>

The CSS grid-auto-rows property.

It specifies the size of an implicitly-created grid row track or pattern of tracks.

See

Mozilla Docs

Optional gridColumn

gridColumn?: ResponsiveValue<GridColumn>

The CSS grid-column property.

It specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

See

Mozilla Docs

Optional gridColumnEnd

gridColumnEnd?: ResponsiveValue<GridColumnEnd>

The CSS grid-column property

It specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

See

Mozilla Docs

Optional gridColumnGap

gridColumnGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

The CSS grid-column-gap property.

It defines the size of the gap (gutter) between an element's columns.

See

Mozilla Docs

Optional gridColumnStart

gridColumnStart?: ResponsiveValue<GridColumnStart>

The CSS grid-column property.

It specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement

See

Mozilla Docs

Optional gridGap

gridGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

The CSS grid-gap property.

It defines the gaps (gutters) between rows and columns

See

Mozilla Docs

Optional gridRow

gridRow?: ResponsiveValue<GridRow>

The CSS grid-row property

It specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

See

Mozilla Docs

Optional gridRowEnd

gridRowEnd?: ResponsiveValue<GridRowEnd>

The CSS grid-row-end property

It specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

See

Mozilla Docs

Optional gridRowGap

gridRowGap?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

The CSS grid-row-gap property.

It defines the size of the gap (gutter) between an element's grid rows.

See

Mozilla Docs

Optional gridRowStart

gridRowStart?: ResponsiveValue<GridRowStart>

The CSS grid-row-start property

It specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

See

Mozilla Docs

Optional gridTemplate

gridTemplate?: ResponsiveValue<GridTemplate>

The CSS grid-template property.

It is a shorthand property for defining grid columns, rows, and areas.

See

Mozilla Docs

Optional gridTemplateAreas

gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>

The CSS grid-template-areas property.

See

Mozilla Docs

Optional gridTemplateColumns

gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>

The CSS grid-template-columns property

It defines the line names and track sizing functions of the grid columns.

See

Mozilla Docs

Optional gridTemplateRows

gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>

The CSS grid-template-rows property.

It defines the line names and track sizing functions of the grid rows.

See

Mozilla Docs

Optional h

h?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">

The CSS height property

Optional height

height?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content">

The CSS height property

Optional hideBelow

hideBelow?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">

Hides an element below the specified breakpoint

Optional hideFrom

hideFrom?: ResponsiveValue<"base" | string & {} | "sm" | "md" | "lg" | "xl" | "2xl">

Hides an element from the specified breakpoint and up

Optional hueRotate

hueRotate?: ResponsiveValue<Length>

Sets the hue-rotate filter value of an element. Value is assigned to --chakra-hue-rotate css variable

Optional iconSpacing

iconSpacing?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

The space between the button icon and label.

Optional inputMode

inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Optional inset

inset?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS left, right, top, bottom property

Optional insetEnd

insetEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

When the direction is ltr, insetEnd is equivalent to right. When the direction is rtl, insetEnd is equivalent to left.

Optional insetInlineEnd

insetInlineEnd?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

When the direction is ltr, insetInlineEnd is equivalent to right. When the direction is rtl, insetInlineEnd is equivalent to left.

Optional insetStart

insetStart?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

When the direction is start, end is equivalent to left. When the direction is start, end is equivalent to right.

Optional insetX

insetX?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS left, and right property

Optional insetY

insetY?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS top, and bottom property

Optional invert

invert?: ResponsiveValue<Length>

Sets the invert filter value of an element. Value is assigned to --chakra-invert css variable

Optional is

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

Optional isActive

isActive?: boolean

If true, the button will be styled in its active state.

Default

false

Optional isDisabled

isDisabled?: boolean

If true, the button will be disabled.

Default

false

Optional isLoading

isLoading?: boolean

If true, the button will show a spinner.

Default

false

Optional isTruncated

isTruncated?: boolean

If true, it clamps truncate a text after one line.

Optional isolation

isolation?: ResponsiveValue<Isolation>

The CSS isolation property

Optional justifyContent

justifyContent?: ResponsiveValue<JustifyContent>

The CSS justify-content property.

It defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

See

Mozilla Docs

Optional justifyItems

justifyItems?: ResponsiveValue<JustifyItems>

The CSS justify-items property.

It defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

See

Mozilla Docs

Optional justifySelf

justifySelf?: ResponsiveValue<JustifySelf>

The CSS justify-self property.

It defines the way a box is justified inside its alignment container along the appropriate axis.

See

Mozilla Docs

Optional layerStyle

layerStyle?: ResponsiveValue<string & {}>

The layer style object to apply. Note: Styles must be located in theme.layerStyles

Optional left

left?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS left property

Optional leftIcon

leftIcon?: ReactElement<any, string | JSXElementConstructor<any>>

If added, the button will show an icon before the button's label.

Optional letterSpacing

letterSpacing?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "tighter" | "tight" | "wide" | "wider" | "widest">

The CSS letter-spacing property

Optional lineHeight

lineHeight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "normal" | number & {} | "shorter" | "short" | "tall" | "taller">

The CSS line-height property

Optional listStyleImage

listStyleImage?: ResponsiveValue<ListStyleImage>

The CSS list-style-image property

Optional listStyleImg

listStyleImg?: ResponsiveValue<ListStyleImage>

The CSS list-style-image property

Optional listStylePos

listStylePos?: ResponsiveValue<ListStylePosition>

The CSS list-style-position property

Optional listStylePosition

listStylePosition?: ResponsiveValue<ListStylePosition>

The CSS list-style-position property

Optional loadingText

loadingText?: ReactNode

The label to show in the button when isLoading is true If no text is passed, it only shows the spinner

Optional m

m?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on top, left, bottom and right

Optional margin

margin?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on top, left, bottom and right

Optional marginBottom

marginBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on bottom

Optional marginEnd

marginEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.

Optional marginInlineEnd

marginInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

When direction is ltr, marginInlineEnd is equivalent to marginRight. When direction is rtl, marginInlineEnd is equivalent to marginLeft.

Optional marginInlineStart

marginInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

When direction is ltr, marginInlineStart is equivalent to marginLeft. When direction is rtl, marginInlineStart is equivalent to marginRight.

Optional marginLeft

marginLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on left

Optional marginRight

marginRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on right

Optional marginStart

marginStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.

Optional marginTop

marginTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on top

Optional marginX

marginX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on left and right

Optional marginY

marginY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on top and bottom

Optional maxH

maxH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">

The CSS max-height property

Optional maxHeight

maxHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">

The CSS max-height property

Optional maxW

maxW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">

The CSS max-width property

Optional maxWidth

maxWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "none" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">

The CSS max-width property

Optional mb

mb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on bottom

Optional me

me?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

When direction is ltr, me is equivalent to marginRight. When direction is rtl, me is equivalent to marginLeft.

Optional minH

minH?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">

The CSS min-height property

Optional minHeight

minHeight?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "-webkit-min-content">

The CSS min-height property

Optional minW

minW?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">

The CSS min-width property

Optional minWidth

minWidth?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic" | "-webkit-fill-available" | "-webkit-min-content">

The CSS min-width property

Optional mixBlendMode

mixBlendMode?: ResponsiveValue<MixBlendMode>

The mix-blend-mode property

Optional ml

ml?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on left

Optional mr

mr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on right

Optional ms

ms?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

When direction is ltr, ms is equivalent to marginLeft. When direction is rtl, ms is equivalent to marginRight.

Optional mt

mt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on top

Optional mx

mx?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on left and right

Optional my

my?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "auto">

Margin on top and bottom

Optional noOfLines

noOfLines?: ResponsiveValue<number>

Used to truncate text at a specific number of lines

Optional objectFit

objectFit?: ResponsiveValue<ObjectFit>

The CSS object-fit property

Optional objectPosition

objectPosition?: ResponsiveValue<ObjectPosition<Length>>

The CSS object-position property

Optional onKeyPress

onKeyPress?: KeyboardEventHandler<HTMLButtonElement>

Deprecated

Optional onKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<HTMLButtonElement>

Deprecated

Optional opacity

opacity?: ResponsiveValue<Opacity>

The CSS opacity property

Optional order

order?: ResponsiveValue<Order>

The CSS order property.

It defines the order to lay out an item in a flex or grid container.

See

Mozilla Docs

Optional outline

outline?: ResponsiveValue<Outline<Length>>

The CSS outline property

Optional outlineColor

outlineColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS outline-color property

Optional outlineOffset

outlineOffset?: ResponsiveValue<OutlineOffset<Length>>

The CSS outline-offset property

Optional overflow

overflow?: ResponsiveValue<Overflow>

The CSS overflow property

Optional overflowWrap

overflowWrap?: ResponsiveValue<OverflowWrap>

The CSS overflow-wrap property

Optional overflowX

overflowX?: ResponsiveValue<OverflowX>

The CSS overflow-x property

Optional overflowY

overflowY?: ResponsiveValue<OverflowY>

The CSS overflow-y property

Optional overscroll

overscroll?: ResponsiveValue<OverscrollBehavior>

The CSS overscroll-behavior property

Optional overscrollBehavior

overscrollBehavior?: ResponsiveValue<OverscrollBehavior>

The CSS overscroll-behavior property

Optional overscrollBehaviorX

overscrollBehaviorX?: ResponsiveValue<OverscrollBehaviorX>

The CSS overscroll-behavior-x property

Optional overscrollBehaviorY

overscrollBehaviorY?: ResponsiveValue<OverscrollBehaviorY>

The CSS overscroll-behavior-y property

Optional overscrollX

overscrollX?: ResponsiveValue<OverscrollBehaviorX>

The CSS overscroll-behavior-x property

Optional overscrollY

overscrollY?: ResponsiveValue<OverscrollBehaviorY>

The CSS overscroll-behavior-y property

Optional p

p?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on top, left, bottom and right

Optional padding

padding?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on top, left, bottom and right

Optional paddingBottom

paddingBottom?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on bottom

Optional paddingEnd

paddingEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.

Optional paddingInlineEnd

paddingInlineEnd?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

When direction is ltr, paddingInlineEnd is equivalent to paddingRight. When direction is rtl, paddingInlineEnd is equivalent to paddingLeft.

Optional paddingInlineStart

paddingInlineStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

When direction is ltr, paddingInlineStart is equivalent to paddingLeft. When direction is rtl, paddingInlineStart is equivalent to paddingRight.

Optional paddingLeft

paddingLeft?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on left

Optional paddingRight

paddingRight?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on right

Optional paddingStart

paddingStart?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.

Optional paddingTop

paddingTop?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on top

Optional paddingX

paddingX?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on left and right

Optional paddingY

paddingY?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on top and bottom

Optional pb

pb?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on bottom

Optional pe

pe?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

When direction is ltr, pe is equivalent to paddingRight. When direction is rtl, pe is equivalent to paddingLeft.

Optional pl

pl?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on left

Optional placeContent

placeContent?: ResponsiveValue<PlaceContent>

The CSS place-content property.

It allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

See

Mozilla Docs

Optional placeItems

placeItems?: ResponsiveValue<PlaceItems>

The CSS place-items property.

It allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flex.

See

Mozilla Docs

Optional placeSelf

placeSelf?: ResponsiveValue<PlaceSelf>

The CSS place-self property.

It allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox.

See

Mozilla Docs

Optional pointerEvents

pointerEvents?: ResponsiveValue<PointerEvents>

The CSS pointer-events property

Optional pos

pos?: ResponsiveValue<Position>

The CSS position property

Optional position

position?: ResponsiveValue<Position>

The CSS position property

Optional pr

pr?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on right

Optional ps

ps?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

When direction is ltr, ps is equivalent to paddingLeft. When direction is rtl, ps is equivalent to paddingRight.

Optional pt

pt?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on top

Optional px

px?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on left and right

Optional py

py?: ResponsiveValue<number | "px" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "72" | "-72" | "80" | "-80" | "96" | "-96" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">

Padding on top and bottom

Optional resize

resize?: ResponsiveValue<Resize>

The CSS resize property

Optional right

right?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS right property

Optional rightIcon

rightIcon?: ReactElement<any, string | JSXElementConstructor<any>>

If added, the button will show an icon after the button's label.

Optional ring

ring?: ResponsiveValue<Length>

Creates outline rings with CSS box-shadow property

Optional ringColor

ringColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The color of the outline ring

Optional ringInset

ringInset?: ResponsiveValue<"inset" | "none">

If the outline ring should an inset

Optional ringOffset

ringOffset?: ResponsiveValue<Length>

The thickness of the offset shadow when using outline rings

Optional ringOffsetColor

ringOffsetColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The color of the offset shadow when adding outline rings

Optional rotate

rotate?: ResponsiveValue<Length>

Sets the rotation value of the element

Optional rounded

rounded?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-radius property

Optional roundedBottom

roundedBottom?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-bottom-radius property

Optional roundedBottomLeft

roundedBottomLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-bottom-left-radius property

Optional roundedBottomRight

roundedBottomRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-bottom-right-radius property

Optional roundedEnd

roundedEnd?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

When direction is ltr, roundedEnd is equivalent to borderRightRadius. When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

Optional roundedLeft

roundedLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-left-radius property

Optional roundedRight

roundedRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-right-radius property

Optional roundedStart

roundedStart?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

When direction is ltr, roundedEnd is equivalent to borderRightRadius. When direction is rtl, roundedEnd is equivalent to borderLeftRadius.

Optional roundedTop

roundedTop?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-top-radius property

Optional roundedTopLeft

roundedTopLeft?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-top-left-radius property

Optional roundedTopRight

roundedTopRight?: ResponsiveValue<number | "base" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full">

The CSS border-top-right-radius property

Optional rowGap

rowGap?: ResponsiveValue<RowGap<Length>>

The CSS row-gap property.

It sets the size of the gap (gutter) between an element's grid rows.

See

Mozilla Docs

Optional saturate

saturate?: ResponsiveValue<Length>

Sets the saturation filter value of an element. Value is assigned to --chakra-saturate css variable

Optional scale

scale?: ResponsiveValue<Length>

Sets the scale value of the element

Optional scaleX

scaleX?: ResponsiveValue<Length>

Scale value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-scale-x

Optional scaleY

scaleY?: ResponsiveValue<Length>

Scale value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-scale-y

Optional shadow

shadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | BoxShadow | "inner" | "dark-lg">

The box-shadow property

Optional skewX

skewX?: ResponsiveValue<Length>

Skew value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-skew-x

Optional skewY

skewY?: ResponsiveValue<Length>

Skew value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-skew-y

Optional spinner

spinner?: ReactElement<any, string | JSXElementConstructor<any>>

Replace the spinner component when isLoading is set to true

Optional spinnerPlacement

spinnerPlacement?: "end" | "start"

It determines the placement of the spinner when isLoading is true

Default

"start"

Optional srOnly

srOnly?: true | "focusable"

If true, hide an element visually without hiding it from screen readers.

If focusable, the sr-only styles will be undone, making the element visible to sighted users as well as screen readers.

Optional stroke

stroke?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS stroke property for icon svgs and paths

Optional sx

sx?: SystemStyleObject

Used to pass theme-aware style props. NB: This is the public API for user-land

Optional textAlign

textAlign?: ResponsiveValue<TextAlign>

The CSS text-align property

Optional textColor

textColor?: ResponsiveValue<Color | "current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color">

The CSS color property

Optional textDecor

textDecor?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">

The CSS text-decoration property

Optional textDecoration

textDecoration?: ResponsiveValue<number | "blink" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dashed" | "dotted" | "double" | "solid" | "from-font" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | "wavy">

The CSS text-decoration property

Optional textDecorationColor

textDecorationColor?: ResponsiveValue<"current" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "linkedin.50" | "linkedin.100" | "linkedin.200" | "linkedin.300" | "linkedin.400" | "linkedin.500" | "linkedin.600" | "linkedin.700" | "linkedin.800" | "linkedin.900" | "facebook.50" | "facebook.100" | "facebook.200" | "facebook.300" | "facebook.400" | "facebook.500" | "facebook.600" | "facebook.700" | "facebook.800" | "facebook.900" | "messenger.50" | "messenger.100" | "messenger.200" | "messenger.300" | "messenger.400" | "messenger.500" | "messenger.600" | "messenger.700" | "messenger.800" | "messenger.900" | "whatsapp.50" | "whatsapp.100" | "whatsapp.200" | "whatsapp.300" | "whatsapp.400" | "whatsapp.500" | "whatsapp.600" | "whatsapp.700" | "whatsapp.800" | "whatsapp.900" | "twitter.50" | "twitter.100" | "twitter.200" | "twitter.300" | "twitter.400" | "twitter.500" | "twitter.600" | "twitter.700" | "twitter.800" | "twitter.900" | "telegram.50" | "telegram.100" | "telegram.200" | "telegram.300" | "telegram.400" | "telegram.500" | "telegram.600" | "telegram.700" | "telegram.800" | "telegram.900" | "chakra-body-text" | "chakra-body-bg" | "chakra-border-color" | "chakra-subtle-bg" | "chakra-placeholder-color" | TextDecorationColor>

The CSS text-decoration-color property

Optional textDecorationLine

textDecorationLine?: ResponsiveValue<TextDecorationLine>

The CSS text-decoration-line property

Optional textDecorationStyle

textDecorationStyle?: ResponsiveValue<TextDecorationStyle>

The CSS text-decoration-style property

Optional textDecorationThickness

textDecorationThickness?: ResponsiveValue<TextDecorationThickness<0 | string & {}>>

The CSS text-decoration-thickness property

Optional textIndent

textIndent?: ResponsiveValue<TextIndent<0 | string & {}>>

The CSS text-indent property

Optional textOverflow

textOverflow?: ResponsiveValue<TextOverflow>

The CSS text-overflow property

Optional textShadow

textShadow?: ResponsiveValue<number | "base" | "outline" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "inner" | "dark-lg" | TextShadow>

The text-shadow property

Optional textStyle

textStyle?: ResponsiveValue<string & {}>

The text style object to apply. Note: Styles must be located in theme.textStyles

Optional textTransform

textTransform?: ResponsiveValue<TextTransform>

The CSS text-transform property

Optional textUnderlineOffset

textUnderlineOffset?: ResponsiveValue<number | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto">

The CSS text-underline-offset property

Optional top

top?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS top property

Optional transform

transform?: ResponsiveValue<"auto" | Transform | "auto-gpu">

The CSS transform property

Optional transformOrigin

transformOrigin?: ResponsiveValue<number | "center" | "px" | "top" | "right" | "bottom" | "left" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl">

The CSS transform-origin property

Optional transition

transition?: ResponsiveValue<Transition<string & {}>>

The CSS transition property

Optional transitionDelay

transitionDelay?: ResponsiveValue<TransitionDelay<string & {}>>

The CSS transition-delay property

Optional transitionDuration

transitionDuration?: ResponsiveValue<string>

The CSS transition-duration property

Optional transitionProperty

transitionProperty?: ResponsiveValue<TransitionProperty>

The CSS transition-property property

Optional transitionTimingFunction

transitionTimingFunction?: ResponsiveValue<TransitionTimingFunction>

The CSS transition-timing-function property

Optional translateX

translateX?: ResponsiveValue<Length>

Translate value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-translate-x

Optional translateY

translateY?: ResponsiveValue<Length>

Translate value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-translate-y

Optional userSelect

userSelect?: ResponsiveValue<UserSelect>

The CSS user-select property

Optional verticalAlign

verticalAlign?: ResponsiveValue<VerticalAlign<Length>>

The CSS vertical-align property

Optional visibility

visibility?: ResponsiveValue<Visibility>

The CSS visibility property

Optional w

w?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">

The CSS width property

Optional whiteSpace

whiteSpace?: ResponsiveValue<WhiteSpace>

The CSS white-space property

Optional width

width?: ResponsiveValue<number | "px" | string & {} | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "auto" | "3xs" | "2xs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "full" | "prose" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "-webkit-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic">

The CSS width property

Optional willChange

willChange?: ResponsiveValue<WillChange>

The CSS will-change property

Optional wordBreak

wordBreak?: ResponsiveValue<WordBreak>

The CSS word-break property

Optional zIndex

zIndex?: ResponsiveValue<"base" | "overlay" | ZIndex | "hide" | "docked" | "dropdown" | "sticky" | "banner" | "modal" | "popover" | "skipLink" | "toast" | "tooltip">

The CSS z-index property

Settings

Member Visibility

Theme

Generated using TypeDoc