Inline is a component for aligning content.
UsagePermalink to: Usage
Inline is a component for aligning content along a row.
When to usePermalink to: When to use
- Use the Inline component to quickly build small blocks of content which need to render next to each other.
When not to usePermalink to: When not to use
- Inline is intended for small blocks of content. It's not recommended for layout at a page-level.
- Inline uses flexbox(external link) under the hood. To escape unexpected behaviour related to how flex containers affect their children, each child passed to Inline is wrapped in a div. Because of this, Inline cannot currently be used in scenarios which require direct descendants to the container, such as building a list with role="list"(external link) and role="listitem"(external link).
ExamplesPermalink to: Examples
AlignmentPermalink to: Alignment
Inline supports aligning all its child content across the inline direction.
Open
import { Button } from "@peakon/bedrock/react/button";
import { Inline, Stack } from "@peakon/bedrock/react/layout";
<Stack spacing={16} alignInline="stretch">
<Inline spacing={16} alignInline="start">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save changes</Button>
</Inline>
<Inline spacing={16} alignInline="center">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save changes</Button>
</Inline>
<Inline spacing={16} alignInline="end">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save changes</Button>
</Inline>
<Inline spacing={16} alignInline="space-between">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save changes</Button>
</Inline>
<Inline spacing={16} alignInline="space-around">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save changes</Button>
</Inline>
</Stack>Unlike Stack, Inline also supports aligning its content across the block direction.
Unsaved changes
Unsaved changes
Unsaved changes
Open
import { Button } from "@peakon/bedrock/react/button";
import { Inline, Stack } from "@peakon/bedrock/react/layout";
import { BodyText } from '@peakon/bedrock/react/typography';
<Stack spacing={16}>
<Inline spacing={16}>
<BodyText>Unsaved changes</BodyText>
<Button variant="primary">Save changes</Button>
</Inline>
<Inline spacing={16} alignBlock="center">
<BodyText>Unsaved changes</BodyText>
<Button variant="primary">Save changes</Button>
</Inline>
<Inline spacing={16} alignBlock="end">
<BodyText>Unsaved changes</BodyText>
<Button variant="primary">Save changes</Button>
</Inline>
</Stack>SpacingPermalink to: Spacing
Inline supports a spacing prop which applies an equal gap between each of its children.
Open
import { Button } from "@peakon/bedrock/react/button";
import { Inline } from "@peakon/bedrock/react/layout";
<Inline spacing={8}>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save changes</Button>
</Inline>Responsive spacingPermalink to: Responsive spacing
The spacing prop on Inline supports responsiveness.
To use responsive spacing, instead of providing one value, provide an object with Bedrock breakpoints as the keys and pass the associated spacing as their value. See Bedrock breakpoints for an overview of what each breakpoint maps to.
The only required value is base, which is the default value and applies at 0px. You can choose as many or few breakpoints as required to change spacing as the viewport grows in width.
Open
import { Inline } from "@peakon/bedrock/react/layout";
<Inline
spacing={{
base: 0,
xs: 8,
sm: 16,
md: 32,
lg: 48,
xl: 64,
}}
>
<div>Item 1</div>
<div>Item 2</div>
</Inline>Props TablePermalink to: Props Table
InlinePermalink to: Inline
Props extend from HTML Div Element(external link), with the omission of className and style
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
children | ReactNode | The contents of the Inline. | — | Yes |
alignInline | start | enter | end | stretch | space-between | space-around | Determines how the items within Inline will align across the inline direction. | start | No |
alignBlock | start | enter | end | stretch | Determines how the items within Inline will align across the block direction. | start | No |
noWrap | boolean | Forces the items within Inline onto a single line. This may cause them to overflow the Inline container. | — | No |
spacing | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Determines the gap between each item in the Inline. | — | No |