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"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Box padding="10" rounded="sm" borderWidth="1px">
<Bleed inline="10">
<DecorativeBox height="20">Bleed</DecorativeBox>
</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"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Box padding="10" rounded="sm" borderWidth="1px">
<Bleed block="10">
<DecorativeBox height="20">Bleed</DecorativeBox>
</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"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack gap="8">
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed inlineStart="8">
<DecorativeBox height="8">inlineStart</DecorativeBox>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed inlineEnd="8">
<DecorativeBox height="8">inlineEnd</DecorativeBox>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed blockStart="8">
<DecorativeBox height="8">blockStart</DecorativeBox>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed blockEnd="8">
<DecorativeBox height="8">blockEnd</DecorativeBox>
</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. |