Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Inline

    Lays children out horizontally, wraps them to a new row when space runs out and sets the space between them with a token.

    Storybook
    Storybook
    Source
    Source

    When to use

    Section titled “When to use”

    Use Inline to lay children out in a horizontal flow with a token-based gap: button rows, tag groups, meta lines. When the row is full, children wrap to the next row.

    When not to use

    Section titled “When not to use”
    • To lay out vertically: Use Stack for items on top of each other.
    • For columns: Use Grid for aligned columns and rows. A wrapped Inline does not align columns.
    • To change the visual order: Inline has no reverse direction. Reading order is DOM order.
    • For a box look: If you need padding, a surface or a border, use Box.

    Anatomy

    Section titled “Anatomy”

    Inline has two parts:

    1. Container: a horizontal flex container (flex-row). gap, align, justify and wrap apply to this element.
    2. Children: children, in DOM order from left to right. With wrapping on, a full row continues on the next one; the space between rows is gap.

    Behaviour

    Section titled “Behaviour”
    • Inline is static: it does not change on hover, click or focus, and it is not in the tab order.
    • Defaults: gap sm, align center, justify start, wrap true.
    • With wrapping on, the same gap is used both horizontally and between rows.
    • Visual order is always DOM order; there is no reverse direction or order setting.

    Guidelines

    Section titled “Guidelines”

    Keep wrapping on for button rows

    Section titled “Keep wrapping on for button rows”

    On a narrow screen, buttons that do not fit on one row should drop to the next row, not overflow.

    DoWrapping on: buttons drop to a new row if they do not fit.
    Don'tWrapping off: on a narrow screen the buttons overflow.

    Leave space between children

    Section titled “Leave space between children”

    Leave the gap to Inline; it changes in one place. With no gap at all, items run together.

    First itemSecond item
    DoGap `md`: the items read separately.
    First itemSecond item
    Don'tGap `none`: the items run together.

    Content

    Section titled “Content”
    • Inline carries no text of its own.
    • When you pass render={<ul />}, write every child as an <li>.
    • Keep example text neutral: “First item”, “Secondary button”.
    Section titled “Related components”
    • Stack: To lay items out vertically.
    • Grid: For aligned columns.
    • Box: For padding, surface and border.
    • Button: The child you see most often in an Inline.