Box
Box is the most abstract component on top of which all other Chakra UI
components are built. By default, it renders a div
element.
The Box component is useful because it helps with 3 common use cases:
- Create responsive layouts with ease.
- Provide a shorthand way to pass styles via props (
bg
instead ofbackgroundColor
). - Compose new component and allow for override using the
as
prop.
Import#
import { Box } from "@chakra-ui/react"
Usage#
<Box bg="tomato" w="100%" p={4} color="white">This is the Box</Box>
Usage#
// Sample card from Airbnbfunction AirbnbExample() {const property = {imageUrl: "https://bit.ly/2Z4KKcF",imageAlt: "Rear view of modern home with pool",beds: 3,baths: 2,title: "Modern home in city center in the heart of historic Los Angeles",formattedPrice: "$1,900.00",reviewCount: 34,rating: 4,}return (<Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden"><Image src={property.imageUrl} alt={property.imageAlt} /><Box p="6"><Box display="flex" alignItems="baseline"><Badge borderRadius="full" px="2" colorScheme="teal">New</Badge><Boxcolor="gray.500"fontWeight="semibold"letterSpacing="wide"fontSize="xs"textTransform="uppercase"ml="2">{property.beds} beds • {property.baths} baths</Box></Box><Boxmt="1"fontWeight="semibold"as="h4"lineHeight="tight"isTruncated>{property.title}</Box><Box>{property.formattedPrice}<Box as="span" color="gray.600" fontSize="sm">/ wk</Box></Box><Box display="flex" mt="2" alignItems="center">{Array(5).fill("").map((_, i) => (<StarIconkey={i}color={i < property.rating ? "teal.500" : "gray.300"}/>))}<Box as="span" ml="2" color="gray.600" fontSize="sm">{property.reviewCount} reviews</Box></Box></Box></Box>)}
as prop#
You can use the as
prop to change the element render, just like
styled-components.
<Box as="button" borderRadius="md" bg="tomato" color="white" px={4} h={8}>Button</Box>