Inline

Horizontal layout that wraps by default.

Arranges children in a row. Wrapping is on by default because a horizontal row that cannot wrap is the usual cause of overflow on narrow viewports.

Import

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

Also available from the subpath entry @abbainitiative/ui/inline.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

<Inline gap={2}>
  <Button>Save</Button>
  <Button variant="outline">Cancel</Button>
</Inline>

Props