Playground

Inline

layout

Horizontal wrapping flow for buttons, badges, chips, and tags

Flex with wrapping enabled — items flow left-to-right and wrap to next line

Contrast with Stack: Stack does NOT wrap; Inline DOES wrap

import { Inline } from "@everydayos/ui";

Usage

Wrapping set of action buttons. Use Inline instead of div flex-wrap — it applies token-backed gaps and correct flex-wrap behavior.

<Inline spacing="sm">
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Cancel</Button>
</Inline>

API

spacing

Default: md

xssmmdlgxl

align

Default: center

startcenterendstretchbaseline

justify

Default: start

startcenterendbetweenaroundevenly

Prop	Type	Default
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Tag/Badge Cloud

A set of badges or tags that wraps to multiple lines. Inline handles the wrapping automatically — no need for flex-wrap on a raw div.

<Inline spacing="xs">
  <Badge variant="secondary">Air Quality</Badge>
  <Badge variant="secondary">HVAC</Badge>
  <Badge variant="secondary">Smart Home</Badge>
  <Badge variant="secondary">Sustainability</Badge>
  <Badge variant="secondary">Energy</Badge>
  <Badge variant="secondary">Design</Badge>
</Inline>

Mixed inline content

Inline can contain any mix of components. Use justify and align to control distribution and cross-axis alignment.

<Inline spacing="sm" align="center" justify="between">
  <Heading as="h3" size="m">Section Title</Heading>
  <Inline spacing="xs">
    <Badge variant="outline">Status</Badge>
    <Button size="sm" variant="ghost">Edit</Button>
  </Inline>
</Inline>

Composition

Pairs well with

Button

Badge

When to avoid

Need vertical stacking — use Stack instead
Need grid layout — use Grid instead
Need a non-wrapping horizontal row — use Stack direction='horizontal'

Patterns

Action Group

Inline

Button

A wrapping set of action buttons inside a Surface or Section. Inline ensures buttons wrap gracefully on smaller screens instead of overflowing.

<Inline spacing="sm">
  <Button>Save</Button>
  <Button variant="secondary">Save Draft</Button>
  <Button variant="ghost">Cancel</Button>
</Inline>

Filter Bar

Inline

Badge

Button

Horizontal row of filter badges or toggle buttons that wraps on mobile. Inline handles the wrap; Stack horizontal would not.

<Inline spacing="xs">
  {filters.map((f) => (
    <Badge
      key={f.value}
      variant={activeFilter === f.value ? "default" : "outline"}
      className="cursor-pointer"
      onClick={() => setActiveFilter(f.value)}
    >
      {f.label}
    </Badge>
  ))}
</Inline>