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.

Outkit uses Styled System to achieve this. We extend styled-system's utilities to provide other helpful shorthands.

Style Props Reference

The following table shows a list of every style prop and the properties within each group. To learn more about it, you can also check the Styled System docs:

Margin & padding

import { Box } from '@outfitio/outkit';

// 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 `12px` from the first breakpoint and up

<Box m={[2, 3]} />;

Color & background color

import { Box } from '@outfitio/outkit';

// 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' />

Typography

import { Box } from '@outfitio/outkit';

// 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' ]} />

Layout, width and height

import { Box } from '@outfitio/outkit';

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

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

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

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

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

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>;

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

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>;

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

Background

import { Box } from '@outfitio/outkit';

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

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

Borders

import { Box } from '@outfitio/outkit';

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

Border Radius

import { Button } from '@chakra-ui/core';

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

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

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

Position

import { Box } from '@outfitio/outkit';

// 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>;

Shadow

import { Box, Text } from '@chakra-ui/core';

// text-shadow will be `theme.shadows.sm`
// box-shadow will be `theme.shadows.md`
<Box textShadow="sm" boxShadow="md" />;

// raw CSS values
<Text textShadow="2px 2px #ff0000" boxShadow="5px 10px #888888">
  Text with shadows
</Text>;

Other Props

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

The as prop

The as prop is a feature that all of our components get from @emotion/styled. It allows you to pass a HTML tag or another component to a Chakra component to be rendered as the base tag of that component along with all it's styles and props.

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:

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

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.