ButtonList

Lays its children out in a row with Tabler’s btn-list: a flex container with a 0.5rem gap that wraps when the row is too narrow. Unlike ButtonGroup, the buttons keep their own borders and radius.

<twig:Tabler:ButtonList>
    <twig:Tabler:Button variant="primary">Save changes</twig:Tabler:Button>
    <twig:Tabler:Button variant="default">Save and continue</twig:Tabler:Button>
    <twig:Tabler:Button variant="default" appearance="ghost">Cancel</twig:Tabler:Button>
</twig:Tabler:ButtonList>

<div class="btn-list">
    <button type="button" class="btn btn-primary">Save changes</button>
    <button type="button" class="btn">Save and continue</button>
    <button type="button" class="btn btn-ghost">Cancel</button>
</div>

Alignment

center centers the row (btn-list-center). To push the buttons to the end, add the justify-content-end class:

<div class="space-y">
    <twig:Tabler:ButtonList center="{{ true }}">
        <twig:Tabler:Button variant="primary">Accept invitation</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Decline</twig:Tabler:Button>
    </twig:Tabler:ButtonList>
    <twig:Tabler:ButtonList class="justify-content-end">
        <twig:Tabler:Button variant="default">Cancel</twig:Tabler:Button>
        <twig:Tabler:Button variant="danger">Delete project</twig:Tabler:Button>
    </twig:Tabler:ButtonList>
</div>

<div class="space-y">
    <div class="btn-list btn-list-center">
        <button type="button" class="btn btn-primary">Accept invitation</button>
        <button type="button" class="btn">Decline</button>
    </div>
    <div class="btn-list justify-content-end">
        <button type="button" class="btn">Cancel</button>
        <button type="button" class="btn btn-danger">Delete project</button>
    </div>
</div>

Wrapping

The buttons move to the next line when they do not fit, with the same gap between rows:

<div style="max-width: 22rem">
    <twig:Tabler:ButtonList>
        <twig:Tabler:Button variant="default" size="sm">Unpaid</twig:Tabler:Button>
        <twig:Tabler:Button variant="default" size="sm">Overdue</twig:Tabler:Button>
        <twig:Tabler:Button variant="default" size="sm">Due this week</twig:Tabler:Button>
        <twig:Tabler:Button variant="default" size="sm">Disputed</twig:Tabler:Button>
        <twig:Tabler:Button variant="default" size="sm">Partially paid</twig:Tabler:Button>
        <twig:Tabler:Button variant="default" size="sm">Written off</twig:Tabler:Button>
    </twig:Tabler:ButtonList>
</div>

<div style="max-width: 22rem">
    <div class="btn-list">
        <button type="button" class="btn btn-sm">Unpaid</button>
        <button type="button" class="btn btn-sm">Overdue</button>
        <button type="button" class="btn btn-sm">Due this week</button>
        <button type="button" class="btn btn-sm">Disputed</button>
        <button type="button" class="btn btn-sm">Partially paid</button>
        <button type="button" class="btn btn-sm">Written off</button>
    </div>
</div>

Mixed content

Any child is spaced the same way: a button group or a dropdown sits next to plain buttons.

<twig:Tabler:ButtonList>
    <twig:Tabler:Button variant="primary">
        <twig:Tabler:Icon name="plus" class="icon" /> New invoice
    </twig:Tabler:Button>
    <twig:Tabler:ButtonGroup aria-label="View">
        <twig:Tabler:ButtonGroup:Toggle id="view-list" name="view" value="list" checked="{{ true }}">List</twig:Tabler:ButtonGroup:Toggle>
        <twig:Tabler:ButtonGroup:Toggle id="view-board" name="view" value="board">Board</twig:Tabler:ButtonGroup:Toggle>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle>Export</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu>
            <twig:Tabler:Dropdown:Item>CSV</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item>PDF</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
</twig:Tabler:ButtonList>

<div class="btn-list">
    <button type="button" class="btn btn-primary">
        <i class="ti ti-plus icon"></i>
        New invoice
    </button>
    <div class="btn-group" role="group" aria-label="View">
        <input type="radio" class="btn-check" id="view-list" name="view" value="list" checked autocomplete="off" />
        <label class="btn" for="view-list">List</label>
        <input type="radio" class="btn-check" id="view-board" name="view" value="board" autocomplete="off" />
        <label class="btn" for="view-board">Board</label>
    </div>
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Export
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">CSV</a>
            <a href="#" class="dropdown-item">PDF</a>
        </div>
    </div>
</div>

Props

Prop	Type	Default	Description
`center`	bool	`false`	Centers the row (`btn-list-center`)

Other attributes go to the root <div class="btn-list">.

Blocks

Block	Default
`content`	Empty: the children, the buttons