Sponsor

Style Props

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Reference#

The following table shows a list of every style prop and the properties within each group.

Margin and padding#

import { Box } from "@chakra-ui/core"

// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>

// You can also use custom values
<Box maxW="960px" mx="auto" />

// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

import { Box } from "@chakra-ui/core"
// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>
// You can also use custom values
<Box maxW="960px" mx="auto" />
// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

Prop	CSS Property	Theme Key
`m`, `margin`	`margin`	`space`
`mt`, `marginTop`	`margin-top`	`space`
`mr`, `marginRight`	`margin-right`	`space`
`mb`, `marginBottom`	`margin-bottom`	`space`
`ml`, `marginLeft`	`margin-left`	`space`
`mx`	`margin-left` and `margin-right`	`space`
`my`	`margin-top` and `margin-bottom`	`space`
`p`, `padding`	`padding`	`space`
`pt`, `paddingTop`	`padding-top`	`space`
`pr`, `paddingRight`	`padding-right`	`space`
`pb`, `paddingBottom`	`padding-bottom`	`space`
`pl`, `paddingLeft`	`padding-left`	`space`
`px`	`padding-left` and `padding-right`	`space`
`py`	`padding-top` and `padding-bottom`	`space`

Color and background color#

import { Box } from "@chakra-ui/core"

// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />

// raw CSS color value
<Box color='#f00' />

// background colors
<Box bg='tomato' />

// verbose prop
<Box backgroundColor='tomato' />

import { Box } from "@chakra-ui/core"
// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />
// raw CSS color value
<Box color='#f00' />
// background colors
<Box bg='tomato' />
// verbose prop
<Box backgroundColor='tomato' />

Prop	CSS Property	Theme Key
`color`	`color`	`colors`
`bg`, `background`	`background`	`colors`
`bgColor`	`background-color`	`colors`
`opacity`	`opacity`	none

Typography#

import { Text } from "@chakra-ui/core"

// font-size of `theme.fontSizes.md`
<Text fontSize="md" />

// font-size `32px`
<Text fontSize={32} />

// font-size `'2em'`
<Text fontSize='2em' />

// text-align `left` on all viewports and `center` from the first breakpoint and up
<Text textAlign={[ 'left', 'center' ]} />

import { Text } from "@chakra-ui/core"
// font-size of `theme.fontSizes.md`
<Text fontSize="md" />
// font-size `32px`
<Text fontSize={32} />
// font-size `'2em'`
<Text fontSize='2em' />
// text-align `left` on all viewports and `center` from the first breakpoint and up
<Text textAlign={[ 'left', 'center' ]} />

Prop	CSS Property	Theme Key
`fontFamily`	`font-family`	`fonts`
`fontSize`	`font-size`	`fontSizes`
`fontWeight`	`font-weight`	`fontWeights`
`lineHeight`	`line-height`	`lineHeights`
`letterSpacing`	`letter-spacing`	`letterSpacings`
`textAlign`	`text-align`	none
`fontStyle`	`font-style`	none
`textTransform`	`text-transform`	none
`textDecoration`	`text-decoration`	none

Layout, width and height#

import { Box } from "@chakra-ui/core"

// verbose
<Box width="100%" height={32} />

// shorthand
<Box w="100%" h="32px" />

// use theme sizing
<Box boxSize="sm" />

// width `50%`
<Box w={1/2} />

// width `256px`
<Box w={256} />

// width `'40px'`
<Box w='40px' />

import { Box } from "@chakra-ui/core"
// verbose
<Box width="100%" height={32} />
// shorthand
<Box w="100%" h="32px" />
// use theme sizing
<Box boxSize="sm" />
// width `50%`
<Box w={1/2} />
// width `256px`
<Box w={256} />
// width `'40px'`
<Box w='40px' />

Prop	CSS Property	Theme Key
`w`, `width`	`width`	`sizes`
`h`, `height`	`height`	`sizes`
`minW`, `minWidth`	`min-width`	`sizes`
`maxW`, `maxWidth`	`max-width`	`sizes`
`minH`, `minHeight`	`min-height`	`sizes`
`maxH`, `maxHeight`	`max-height`	`sizes`
`d`, `display`	`display`	none
`boxSize`	`width`, `height`	`sizes`
`verticalAlign`	`vertical-align`	none
`overflow`	`overflow`	none
`overflowX`	`overflowX`	none
`overflowY`	`overflowY`	none

Flexbox#

import { Box, Flex } from "@chakra-ui/core"

// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>

// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>

import { Box, Flex } from "@chakra-ui/core"
// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>
// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>

Note: Props in * will only work if you use the Flex component.

Prop	CSS Property	Theme Key
`alignItems`, *`align`	`align-items`	none
`alignContent`	`align-content`	none
`justifyItems`	`justify-items`	none
`justifyContent`, *`justify`	`justify-content`	none
`flexWrap`, *`wrap`	`flex-wrap`	none
`flexDirection`, `flexDir`, *`direction`	`flex-direction`	none
`flex`	`flex`	none
`flexGrow`	`flex-grow`	none
`flexShrink`	`flex-shrink`	none
`flexBasis`	`flex-basis`	none
`justifySelf`	`justify-self`	none
`alignSelf`	`align-self`	none
`order`	`order`	none

Grid Layout#

import { Box, Grid } from "@chakra-ui/core"

// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
  Grid
</Box>

// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

import { Box, Grid } from "@chakra-ui/core"
// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
  Grid
</Box>
// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

Note: Props in * will only work if you use the Grid component.

Prop	CSS Property	Theme Key
`gridGap`, *`gap`	`grid-gap`	`space`
`gridRowGap`, *`rowGap`	`grid-row-gap`	`space`
`gridColumnGap`, *`columnGap`	`grid-column-gap`	`space`
`gridColumn`, *`column`	`grid-column`	none
`gridRow`, *`row`	`grid-row`	none
`gridArea`, *`area`	`grid-area`	none
`gridAutoFlow`, *`autoFlow`	`grid-auto-flow`	none
`gridAutoRows`, *`autoRows`	`grid-auto-rows`	none
`gridAutoColumns`, *`autoColumns`	`grid-auto-columns`	none
`gridTemplateRows`, *`templateRows`	`grid-template-rows`	none
`gridTemplateColumns`, *`templateColumns`	`grid-template-columns`	none
`gridTemplateAreas`, *`templateAreas`	`grid-template-areas`	none

Background#

import { Box } from "@chakra-ui/core"

// verbose
<Box
  backgroundImage="url('/images/kyuubi.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>

// shorthand
<Box
  bgImage="url('/images/gaara.png')"
  bgPosition="center"
  bgRepeat="no-repeat"
/>

import { Box } from "@chakra-ui/core"
// verbose
<Box
  backgroundImage="url('/images/kyuubi.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>
// shorthand
<Box
  bgImage="url('/images/gaara.png')"
  bgPosition="center"
  bgRepeat="no-repeat"
/>

Prop	CSS Property	Theme Key
`background`	`background`	none
`bgImage`, `backgroundImage`	`background-image`	none
`bgSize`, `backgroundSize`	`background-size`	none
`bgPosition`,`backgroundPosition`	`background-position`	none
`bgRepeat`,`backgroundRepeat`	`background-repeat`	none
`bgAttachment`,`backgroundAttachment`	`background-attachment`	none

Borders#

<Box border="1px" borderColor="gray.200">
  Card
</Box>

<Box border="1px" borderColor="gray.200">
  Card
</Box>

Prop	CSS Property	Theme Field
`border`	`border`	`borders`
`borderWidth`	`border-width`	`borderWidths`
`borderStyle`	`border-style`	`borderStyles`
`borderColor`	`border-color`	`colors`
`borderTop`	`border-top`	`borders`
`borderTopWidth`	`border-top-width`	`borderWidths`
`borderTopStyle`	`border-top-style`	`borderStyles`
`borderTopColor`	`border-top-color`	`colors`
`borderRight`	`border-right`	`borders`
`borderRightWidth`	`border-right-width`	`borderWidths`
`borderRightStyle`	`border-right-style`	`borderStyles`
`borderRightColor`	`border-right-color`	`colors`
`borderBottom`	`border-bottom`	`borders`
`borderBottomWidth`	`border-bottom-width`	`borderWidths`
`borderBottomStyle`	`border-bottom-style`	`borderStyles`
`borderBottomColor`	`border-bottom-color`	`colors`
`borderLeft`	`border-left`	`borders`
`borderLeftWidth`	`border-left-width`	`borderWidths`
`borderLeftStyle`	`border-left-style`	`borderStyles`
`borderLeftColor`	`border-left-color`	`colors`
`borderX`	`border-left` , `border-right`	`borders`
`borderY`	`border-top` , `border-bottom`	`borders`

Border Radius#

import { Button } from "@chakra-ui/core"

// This button will have no right borderRadius
<Button borderRightRadius="0">Button 1</Button>

// This button will have no left borderRadius*/
<Button borderLeftRadius="0">Button 2</Button>

// top left and top right radius will be `theme.radii.md` => 4px
<Button borderTopRadius="md">Button 2</Button>

import { Button } from "@chakra-ui/core"
// This button will have no right borderRadius
<Button borderRightRadius="0">Button 1</Button>
// This button will have no left borderRadius*/
<Button borderLeftRadius="0">Button 2</Button>
// top left and top right radius will be `theme.radii.md` => 4px
<Button borderTopRadius="md">Button 2</Button>

Prop	CSS Property	Theme Field
`borderRadius`	`border-radius`	`radii`
`borderTopLeftRadius`	`border-top-left-radius`	`radii`
`borderTopRightRadius`	`border-top-right-radius`	`radii`
`borderBottomRightRadius`	`border-bottom-right-radius`	`radii`
`borderBottomLeftRadius`	`border-bottom-left-radius`	`radii`
`borderTopRadius`	`border-top-left-radius` & `border-top-right-radius`	`radii`
`borderRightRadius`	`border-top-right-radius` & `border-bottom-right-radius`	`radii`
`borderBottomRadius`	`border-bottom-left-radius` & `border-bottom-right-radius`	`radii`
`borderLeftRadius`	`border-top-left-radius` & `border-bottom-left-radius`	`radii`

Position#

import { Box } from "@chakra-ui/core"

// verbose
<Box position="absolute">Cover</Box>

// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top="0" left="0">
  Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
  Fixed with zIndex
</Box>

import { Box } from "@chakra-ui/core"
// verbose
<Box position="absolute">Cover</Box>
// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top="0" left="0">
  Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
  Fixed with zIndex
</Box>

Prop	CSS Property	Theme Field
`pos`,`position`	`position`	none
`zIndex`	`z-index`	`zIndices`
`top`	`top`	`space`
`right`	`right`	`space`
`bottom`	`bottom`	`space`
`left`	`left`	`space`

Shadow#

Base

2xl

Dark lg

Outline

Inner

<SimpleGrid bg="gray.50" columns="4" spacing="8" p="10" textAlign="center" rounded="lg" color="gray.400">
  <Box boxShadow="xs" p="6" rounded="md" bg="white">
    xs
  </Box>
  <Box boxShadow="sm" p="6" rounded="md" bg="white">
    sm
  </Box>
  <Box boxShadow="base" p="6" rounded="md" bg="white">
    Base
  </Box>
  <Box boxShadow="md" p="6" rounded="md" bg="white">
    md
  </Box>
  <Box boxShadow="lg" p="6" rounded="md" bg="white">
    lg
  </Box>
  <Box boxShadow="xl" p="6" rounded="md" bg="white">
    xl
  </Box>
  <Box boxShadow="2xl" p="6" rounded="md" bg="white">
    2xl
  </Box>
  <Box boxShadow="dark-lg" p="6" rounded="md" bg="white">
    Dark lg
  </Box>
  <Box boxShadow="outline" p="6" rounded="md" bg="white">
    Outline
  </Box>
  <Box boxShadow="inner" p="6" rounded="md" bg="white">
    Inner
  </Box>
</SimpleGrid>

<SimpleGrid bg="gray.50" columns="4" spacing="8" p="10" textAlign="center" rounded="lg" color="gray.400">
  <Box boxShadow="xs" p="6" rounded="md" bg="white">
    xs
  </Box>
  <Box boxShadow="sm" p="6" rounded="md" bg="white">
    sm
  </Box>
  <Box boxShadow="base" p="6" rounded="md" bg="white">
    Base
  </Box>
  <Box boxShadow="md" p="6" rounded="md" bg="white">
    md
  </Box>
  <Box boxShadow="lg" p="6" rounded="md" bg="white">
    lg
  </Box>
  <Box boxShadow="xl" p="6" rounded="md" bg="white">
    xl
  </Box>
  <Box boxShadow="2xl" p="6" rounded="md" bg="white">
    2xl
  </Box>
  <Box boxShadow="dark-lg" p="6" rounded="md" bg="white">
    Dark lg
  </Box>
  <Box boxShadow="outline" p="6" rounded="md" bg="white">
    Outline
  </Box>
  <Box boxShadow="inner" p="6" rounded="md" bg="white">
    Inner
  </Box>
</SimpleGrid>

Editable Example

Text with shadows

<Text textShadow="2px 2px #ff0000" boxShadow="5px 10px #999" m="6">
  Text with shadows
</Text>

<Text textShadow="2px 2px #ff0000" boxShadow="5px 10px #999" m="6">
  Text with shadows
</Text>

Editable Example

Prop	CSS Property	Theme Field
`textShadow`	`text-shadow`	`shadows`
`boxShadow`	`box-shadow`	`shadows`

Pseudo#

import { Button } from "@chakra-ui/core"

// :hover style
<Button
  colorScheme="teal"
  _hover={{
    background: "white",
    color: "teal.500",
  }}
>
  Hover me
</Button>

// apply :hover over parent element
<Box>
  <Box
    _hover={{ fontWeight: 'semibold' }}
    _groupHover={{ color: 'tomato' }}
  >
  </Box>
</Box>

import { Button } from "@chakra-ui/core"
// :hover style
<Button
  colorScheme="teal"
  _hover={{
    background: "white",
    color: "teal.500",
  }}
>
  Hover me
</Button>
// apply :hover over parent element
<Box>
  <Box
    _hover={{ fontWeight: 'semibold' }}
    _groupHover={{ color: 'tomato' }}
  >
  </Box>
</Box>

Prop	CSS Property	Theme Field
`_hover`	`:hover`, `[data-hover]`	none
`_active`	`:active`, `[data-active]`	none
`_focus`	`:focus`, `[data-focus]`	none
`_highlighted`	`[data-highlighted]`	none
`_focusWithin`	`:focus-within`	none
`_focusVisible`	`:focus-visible`	none
`_disabled`	`[disabled]`, `[aria-disabled=true]`, `[data-disabled]`	none
`_readOnly`	`[aria-readonly=true]`, `[readonly]`, `[data-readonly]`	none
`_before`	`::before`	none
`_after`	`::after`	none
`_empty`	`:empty`	none
`_expanded`	`[aria-expanded=true]`, `[data-expanded]`	none
`_checked`	`[aria-checked=true]`, `[data-checked]`	none
`_grabbed`	`[aria-grabbed=true]`, `[data-grabbed]`	none
`_pressed`	`[aria-pressed=true]`, `[data-pressed]`	none
`_invalid`	`[aria-invalid=true]`, `[data-invalid]`	none
`_valid`	`[data-valid]`, `[data-state=valid]`	none
`_loading`	`[data-loading]`, `[aria-busy=true]`	none
`_selected`	`[aria-selected=true]`, `[data-selected]`	none
`_hidden`	`[hidden]`, `[data-hidden]`	none
`_autofill`	`:-webkit-autofill`	none
`_even`	`:nth-of-type(even)`	none
`_odd`	`:nth-of-type(odd)`	none
`_first`	`:first-of-type`	none
`_last`	`:last-of-type`	none
`_notFirst`	`:not(:first-of-type)`	none
`_notLast`	`:not(:last-of-type)`	none
`_visited`	`:visited`	none
`_activeLink`	`[aria-current=page]`	none
`_indeterminate`	`:indeterminate`, `[aria-checked=mixed]`, `[data-indeterminate]`	none
`_groupHover`	``	none
`_groupFocus`	``	none
`_groupActive`	``	none
`_groupDisabled`	``	none
`_groupInvalid`	``	none
`_groupChecked`	``	none
`_placeholder`	`::placeholder`	none
`_fullScreen`	`:fullscreen`	none
`_selection`	`::selection`	none

Other Props#

Asides all the common style props listed above, all component will accept the following props:

Prop	CSS Property	Theme Field
`animation`	`animation`	none
`appearance`	`appearance`	none
`transform`	`transform`	none
`transformOrigin`	`transform-origin`	none
`visibility`	`visibility`	none
`whiteSpace`	`white-space`	none
`userSelect`	`user-select`	none
`pointerEvents`	`pointer-events`	none
`wordBreak`	`word-break`	none
`overflowWrap`	`overflow-wrap`	none
`textOverflow`	`text-overflow`	none
`boxSizing`	`box-sizing`	none
`cursor`	`cursor`	none
`resize`	`resize`	none
`transition`	`transition`	none
`objectFit`	`object-fit`	none
`objectPosition`	`object-position`	none
`objectPosition`	`object-position`	none
`float`	`float`	none
`fill`	`fill`	`colors`
`stroke`	`stroke`	`colors`
`outline`	`outline`	none

The `as` prop#

The as prop is a feature that all of our components that allows you to pass an HTML tag or component to be rendered.

For example, say you are using a Button component, and you need to make it a link instead. You can compose a and Button like this:

Hello

<Button as="a" target="_blank" variant="outline" href="https://chakra-ui.com">
  Hello
</Button>

<Button as="a" target="_blank" variant="outline" href="https://chakra-ui.com">
  Hello
</Button>

Editable Example

This allows you to use all of the Button props and all of the a props without having to wrap the Button in an a component.

Edit this page

Style Props

.css-12m0k8p{pointer-events:auto;}Reference.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Margin and padding#

Color and background color#

Typography#

Layout, width and height#

Flexbox#

Grid Layout#

Background#

Borders#

Border Radius#

Position#

Shadow#

Pseudo#

Other Props#

The as prop#

Reference#

The `as` prop#