Skip to main content

Inline

Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.

Usage​

Inline arranges children horizontally with consistent spacing.

import { Inline } from '@hardwater/teardrop';

<Inline gap="small">
  <Button>Action 1</Button>
  <Button>Action 2</Button>
</Inline>

Gap​

Control spacing between children:

<Inline gap="xsmall">Tight spacing</Inline>
<Inline gap="small">Compact spacing</Inline>
<Inline gap="medium">Default spacing</Inline>
<Inline gap="large">Comfortable spacing</Inline>

Alignment​

Align Items​

<Inline align="start">Align start</Inline>
<Inline align="center">Align center (default)</Inline>
<Inline align="end">Align end</Inline>
<Inline align="stretch">Stretch</Inline>
<Inline align="baseline">Baseline</Inline>

Justify Content​

<Inline justify="start">Justify start (default)</Inline>
<Inline justify="center">Justify center</Inline>
<Inline justify="end">Justify end</Inline>
<Inline justify="space-between">Space between</Inline>
<Inline justify="space-around">Space around</Inline>

Wrapping​

<Inline wrap>Wrap children</Inline>

API​

Props​

PropTypeDefaultDescription
gapSpacingToken-Spacing between children
align'start' | 'center' | 'end' | 'stretch' | 'baseline''center'Align items
justify'start' | 'center' | 'end' | 'space-between' | 'space-around''start'Justify content
wrapbooleanfalseWrap children
asstring | Component'div'Element or component to render as

Examples​

Button Group​

<Inline gap="small">
  <Button variant="primary">Save</Button>
  <Button variant="secondary">Cancel</Button>
</Inline>

Icon with Text​

<Inline gap="small" align="center">
  <Icon name="info" />
  <Text>Information message</Text>
</Inline>

Tags​

<Inline gap="xsmall" wrap>
  <Badge>Tag 1</Badge>
  <Badge>Tag 2</Badge>
  <Badge>Tag 3</Badge>
  <Badge>Tag 4</Badge>
</Inline>
<Inline as="nav" gap="large">
  <Link href="/">Home</Link>
  <Link href="/about">About</Link>
  <Link href="/contact">Contact</Link>
</Inline>

Form Actions​

<Inline gap="medium" justify="end">
  <Button variant="secondary">Cancel</Button>
  <Button variant="primary">Submit</Button>
</Inline>

Best Practices​

  1. Appropriate gaps - Use smaller gaps for related items, larger for unrelated
  2. Semantic HTML - Use as prop for semantic elements (<nav>, <header>, etc.)
  3. Wrapping - Enable wrap for responsive layouts
  4. Composition - Combine with Box for padding and backgrounds