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#

jsx
1
import { Box } from "@codeday/topo/Atom"
2

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

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

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

Color and background color#

jsx
1
import { Box } from "@codeday/topo/Atom"
2

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

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

10
// background colors
11
<Box bg='tomato' />
12

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

Gradient#

jsx
1
import { Box, Text } from "@codeday/topo/Atom"
2

3
// adding linear gradient and color transitions
4
<Box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />
5

6
// adding radial gradient and color transitions
7
<Box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />
8

9
// adding the text gradient
10
<Text
11
  bgGradient="linear(to-l, #7928CA, #FF0080)"
12
  bgClip="text"
13
  fontSize="6xl"
14
  fontWeight="extrabold"
15
>
16
  Welcome to Topo
17
</Text>
18

19
// topo specific grad prop
20
<Box grad="twilight.30" width="100%" height={16} marginBottom={2} display="inline-block">twlight</Box>
21
<Box grad="lemonlime.60" width="100%" height={16} marginBottom={2} display="inline-block">lemonlime</Box>
22
<Box grad="peachy.45" width="100%" height={16} marginBottom={2} display="inline-block">peachy</Box>
23
<Box grad="taffy.90" width="100%" height={16} marginBottom={2} display="inline-block">taffy</Box>

Typography#

jsx
1
import { Text } from "@topo/codeday/Atom"
2

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

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

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

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

Layout, width and height#

jsx
1
import { Box } from "@codeday/topo/Atom"
2

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

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

9
// use theme sizing
10
<Box boxSize="sm" />
11

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

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

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

Flexbox#

jsx
1
import { Box, Flex } from "@codeday/topo/Atom"
2

3
// verbose
4
<Box display="flex" alignItems="center" justifyContent="space-between">
5
  Box with Flex props
6
</Box>
7

8
// shorthand using the `Flex` component
9
<Flex align="center" justify="center">
10
  Flex Container
11
</Flex>

Grid Layout#

jsx
1
import { Box, Grid } from "@codeday/topo/Atom"
2

3
// verbose
4
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
5
  Grid
6
</Box>
7

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

Background#

jsx
1
import { Box } from "@codeday/topo/Atom"
2

3
// verbose
4
<Box
5
  backgroundImage="url('/images/kyuubi.png')"
6
  backgroundPosition="center"
7
  backgroundRepeat="no-repeat"
8
/>
9

10
// shorthand
11
<Box
12
  bgImage="url('/images/gaara.png')"
13
  bgPosition="center"
14
  bgRepeat="no-repeat"
15
/>

Borders#

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

Border Radius#

jsx
1
import { Button } from "@codeday/topo/Atom"
2

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

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

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

Position#

jsx
1
import { Box } from "@codeday/topo/Atom"
2

3
// verbose
4
<Box position="absolute">Cover</Box>
5

6
// shorthand
7
<Box pos="absolute">Cover</Box>
8
<Box pos="absolute" top="0" left="0">
9
  Absolute with top and left
10
</Box>
11
<Box pos="fixed" w="100%" zIndex={2}>
12
  Fixed with zIndex
13
</Box>

Shadow#

jsx
1
<SimpleGrid
2
  bg="gray.50"
3
  columns={{ sm: 2, md: 4 }}
4
  spacing="8"
5
  p="10"
6
  textAlign="center"
7
  rounded="lg"
8
  color="gray.400"
9
>
10
  <Box boxShadow="xs" p="6" rounded="md" bg="white">
11
    xs
12
  </Box>
13
  <Box boxShadow="sm" p="6" rounded="md" bg="white">
14
    sm
15
  </Box>
16
  <Box boxShadow="base" p="6" rounded="md" bg="white">
17
    Base
18
  </Box>
19
  <Box boxShadow="md" p="6" rounded="md" bg="white">
20
    md
21
  </Box>
22
  <Box boxShadow="lg" p="6" rounded="md" bg="white">
23
    lg
24
  </Box>
25
  <Box boxShadow="xl" p="6" rounded="md" bg="white">
26
    xl
27
  </Box>
28
  <Box boxShadow="2xl" p="6" rounded="md" bg="white">
29
    2xl
30
  </Box>
31
  <Box boxShadow="dark-lg" p="6" rounded="md" bg="white">
32
    Dark lg
33
  </Box>
34
  <Box boxShadow="outline" p="6" rounded="md" bg="white">
35
    Outline
36
  </Box>
37
  <Box boxShadow="inner" p="6" rounded="md" bg="white">
38
    Inner
39
  </Box>
40
</SimpleGrid>

jsx
1
<Text textShadow="1px 1px #ff0000" m="6">
2
  Text with shadows
3
</Text>

Pseudo#

jsx
1
import { Button } from "@codeday/topo/Atom"
2

3
// :hover style
4
<Button
5
  colorScheme="teal"
6
  _hover={{
7
    background: "white",
8
    color: "teal.500",
9
  }}
10
>
11
  Hover me
12
</Button>
13

14
// apply :hover over parent element
15
<Box
16
  role="group"
17
>
18
  <Box
19
    _hover={{ fontWeight: 'semibold' }}
20
    _groupHover={{ color: 'tomato' }}
21
  >
22
  </Box>
23
</Box>

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 in 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:

jsx
1
<Button as="a" target="_blank" variant="outline" href="https://chakra-ui.com">
2
  Hello
3
</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.