Bleed
Used to break an element from the boundaries of its container
AI TipWant to skip the docs? Use the MCP Server
Bleed
Some Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import { Bleed, Box, Heading, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Box padding="10" rounded="sm" borderWidth="1px">
<Bleed inline="10">
<Box height="20">Bleed</Box>
</Bleed>
<Stack mt="6">
<Heading size="md">Some Heading</Heading>
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
</Stack>
</Box>
)
}
Usage
import { Bleed } from "@chakra-ui/react"<Bleed>
<div />
</Bleed>Examples
Vertical
Use the block prop to make the element bleed vertically.
Bleed
import { Bleed, Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box padding="10" rounded="sm" borderWidth="1px">
<Bleed block="10">
<Box height="20">Bleed</Box>
</Bleed>
</Box>
)
}
Specific Direction
Use the inlineStart, inlineEnd, blockStart, and blockEnd props to make
the element bleed in a specific direction.
inlineStart
inlineEnd
blockStart
blockEnd
import { Bleed, Box, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8">
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed inlineStart="8">
<Box height="8">inlineStart</Box>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed inlineEnd="8">
<Box height="8">inlineEnd</Box>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed blockStart="8">
<Box height="8">blockStart</Box>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed blockEnd="8">
<Box height="8">blockEnd</Box>
</Bleed>
</Box>
</Stack>
)
}
Props
| Prop | Default | Type |
|---|---|---|
inline | SystemStyleObject['marginInline'] | undefinedThe negative margin on the x-axis | |
block | SystemStyleObject['marginBlock'] | undefinedThe negative margin on the y-axis | |
inlineStart | SystemStyleObject['marginInlineStart'] | undefinedThe negative margin on the inline-start axis | |
inlineEnd | SystemStyleObject['marginInlineEnd'] | undefinedThe negative margin on the inline-end axis | |
blockStart | SystemStyleObject['marginBlockStart'] | undefinedThe negative margin on the block-start axis | |
blockEnd | SystemStyleObject['marginBlockEnd'] | undefinedThe negative margin on the block-end axis | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |