Inline

import { Inline } from 'yarcl';

xs123

sm123

md123

lg123

xl123

justify="between"

CancelSave

<Inline justify="between">
  <Text>Title</Text>
  <Inline gap="sm">
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </Inline>
</Inline>

Children are centered vertically and wrap by default. Set wrap={false} to keep them on one line.

Props

Prop	Type	Default	Description
align	Align		Cross-axis alignment of children.
as	LayoutElement	'div'	Element to render.
gap	Spacingconfig	config.defaults.gap	Space between children, from the spacing config.
justify	Justify		Main-axis distribution of children.
wrap	boolean	true	Wraps children onto new lines when they don't fit.