Box

Base component for all Mantine components.

Import


import { Box } from '@tidbcloud/uikit'

Usage

Box component is used as a base for all other components. Box supports the following features:

component prop for polymorphic behavior
Style props (padding, margin, colors, etc.)
style prop for custom styles


import { Box } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Box bg="red.5" my="xl" component="a" href="/">
      My component
    </Box>
  )
}

Style props

Box supports all style props:


import { Box } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Box p="md" m="lg" bg="blue.1" c="blue.9" ta="center" fz="lg" fw={700}>
      Box with style props
    </Box>
  )
}

Polymorphic component

Box is a polymorphic component – its default root element is div, but it can be changed to any other element:


import { Box } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Box component="span" c="red">
      I'm a span element
    </Box>
  )
}

Common style props

Prop	CSS Property
`m`, `mt`, `mb`, `ml`, `mr`, `mx`, `my`	margin
`p`, `pt`, `pb`, `pl`, `pr`, `px`, `py`	padding
`bg`	background
`c`	color
`fz`	font-size
`fw`	font-weight
`ta`	text-align
`w`	width
`h`	height
`maw`	max-width
`mah`	max-height
`miw`	min-width
`mih`	min-height