Inline

The Inline component arranges its children in a horizontal row. It extends the Box component’s capabilities, but always renders with display="inline-flex" and a horizontal flow, giving you consistent spacing with a simple API.

Features

• Horizontal flow with consistent gap
• Responsive gap values via arrays
• Extends Box props (e.g., margin, padding, alignItems, justifyContent, etc.)
• Composable with other layout primitives (Stack, Columns, Box)
• Supports wrapping if needed via flexWrap="wrap"

Usage

import { Inline } from '@loke/design-system/inline';

export default function Example() {
  return (
    <Inline gap={4}>
      <div className="border border-border bg-card p-3">Item 1</div>
      <div className="border border-border bg-card p-3">Item 2</div>
      <div className="border border-border bg-card p-3">Item 3</div>
    </Inline>
  );
}

Tips:

• Use responsive arrays to adjust gaps across breakpoints: gap=2468
• For wrapping content (chips/tags), add flexWrap="wrap"
• Combine with Box padding or margin props for outer spacing

Props

Examples

Default

<DefaultInlineExample />

Many items

<Inline gap={2}>
  {Array.from({ length: 10 }).map((_, i) => (
    <div key={i} className="border border-border bg-card p-4">
      Block {i + 1}
    </div>
  ))}
</Inline>

Responsive gap

<ResponsiveGapInlineExample />

Nested inlines

<NestedInlinesExample />

Wrapped inline (chips/tags)

<WrappedInlineExample />

Best practices

• Use Inline for small, horizontal groupings (controls, tags, indicators)
• Favor gap over manual margins to keep spacing uniform
• Use flexWrap="wrap" for chip/tag collections that should wrap gracefully
• Keep content blocks reasonably sized; for structured grids use Columns