Design System

Inline

CompletedIn ProgressPendingBlocked
<Inline space="small">
    <Badge tone="positive">Completed</Badge>
    <Badge tone="info">In Progress</Badge>
    <Badge tone="caution">Pending</Badge>
    <Badge tone="critical">Blocked</Badge>
</Inline>

Horizontal alignment

The "align" prop controls how children are distributed along the horizontal axis.

left
center
right

Vertical alignment

The "alignY" prop controls how children are aligned on the cross axis.

top
center
bottom

Responsive values

The "space" and "align" props accept responsive objects. Resize the window to see the effect.

<Inline
    space={{ mobile: 'x-small', tablet: 'large' }}
    align={{ mobile: 'center', tablet: 'left' }}>
    <Placeholder
        height={60}
        width={80}
        tone="info"
    />
    <Placeholder
        height={60}
        width={80}
        tone="info"
    />
    <Placeholder
        height={60}
        width={80}
        tone="info"
    />
</Inline>

Collapsing below a breakpoint

The "collapseBelow" prop switches the layout from a column to a row at the given breakpoint. Resize the window to see the effect.

<Inline
    space="small"
    collapseBelow="tablet">
    <Button tone="brand">Save changes</Button>
    <Button
        tone="neutral"
        variant="soft">
        Cancel
    </Button>
</Inline>