Bleed

A bleed controls negative whitespace in layouts.

Examples Code Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`all`
Description	Bleed along both axis.
Type	`"space.025" \| "space.050" \| "space.100" \| "space.150" \| "space.200"`

`block`
Description	Bleed along the block axis
Type	`"space.025" \| "space.050" \| "space.100" \| "space.150" \| "space.200"`

`children`
Required
Description	Elements to be rendered inside the Flex.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`inline`
Description	Bleed along the inline axis.
Type	`"space.025" \| "space.050" \| "space.100" \| "space.150" \| "space.200"`

`role`
Description	Accessible role.
Type	`string`

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`xcss`
Description	Apply a subset of permitted styles powered by Atlassian Design System design tokens.
Type	`false \| (XCSSValue<"appearance" \| "color" \| "maxWidth" \| "grid" \| "borderColor" \| "clipPath" \| "filter" \| "marker" \| "mask" \| "height" \| "width" \| "translate" \| "content" \| "border" \| ... 487 more ... \| "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.