ButtonToolbar

Combines button groups into one toolbar, Bootstrap’s btn-toolbar: a flex row that wraps. The root gets role="toolbar": give it an aria-label. The toolbar adds no space between its children, so add a gap class such as gap-2.

<twig:Tabler:ButtonToolbar aria-label="Editor toolbar" class="gap-2">
    <twig:Tabler:ButtonGroup aria-label="Formatting">
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Bold">
            <twig:Tabler:Icon name="bold" class="icon" />
        </twig:Tabler:Button>
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Italic">
            <twig:Tabler:Icon name="italic" class="icon" />
        </twig:Tabler:Button>
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Underline">
            <twig:Tabler:Icon name="underline" class="icon" />
        </twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="Lists">
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Bulleted list">
            <twig:Tabler:Icon name="list" class="icon" />
        </twig:Tabler:Button>
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Numbered list">
            <twig:Tabler:Icon name="list-numbers" class="icon" />
        </twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="History">
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Undo">
            <twig:Tabler:Icon name="arrow-back-up" class="icon" />
        </twig:Tabler:Button>
        <twig:Tabler:Button variant="default" iconOnly="{{ true }}" aria-label="Redo">
            <twig:Tabler:Icon name="arrow-forward-up" class="icon" />
        </twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
</twig:Tabler:ButtonToolbar>

<div class="btn-toolbar gap-2" role="toolbar" aria-label="Editor toolbar">
    <div class="btn-group" role="group" aria-label="Formatting">
        <button type="button" class="btn btn-icon" aria-label="Bold"><i class="ti ti-bold icon"></i></button>
        <button type="button" class="btn btn-icon" aria-label="Italic"><i class="ti ti-italic icon"></i></button>
        <button type="button" class="btn btn-icon" aria-label="Underline"><i class="ti ti-underline icon"></i></button>
    </div>
    <div class="btn-group" role="group" aria-label="Lists">
        <button type="button" class="btn btn-icon" aria-label="Bulleted list"><i class="ti ti-list icon"></i></button>
        <button type="button" class="btn btn-icon" aria-label="Numbered list">
            <i class="ti ti-list-numbers icon"></i>
        </button>
    </div>
    <div class="btn-group" role="group" aria-label="History">
        <button type="button" class="btn btn-icon" aria-label="Undo"><i class="ti ti-arrow-back-up icon"></i></button>
        <button type="button" class="btn btn-icon" aria-label="Redo">
            <i class="ti ti-arrow-forward-up icon"></i>
        </button>
    </div>
</div>

Input groups

An input group placed in the toolbar keeps its natural width instead of stretching:

<twig:Tabler:ButtonToolbar aria-label="Pagination" class="gap-2">
    <twig:Tabler:ButtonGroup aria-label="Pages">
        <twig:Tabler:Button variant="default">1</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">2</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">3</twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
    <div class="input-group">
        <span class="input-group-text" id="go-to-page">Go to page</span>
        <input type="number" class="form-control" min="1" style="width: 5rem" aria-describedby="go-to-page">
    </div>
</twig:Tabler:ButtonToolbar>

<div class="btn-toolbar gap-2" role="toolbar" aria-label="Pagination">
    <div class="btn-group" role="group" aria-label="Pages">
        <button type="button" class="btn">1</button>
        <button type="button" class="btn">2</button>
        <button type="button" class="btn">3</button>
    </div>
    <div class="input-group">
        <span class="input-group-text" id="go-to-page">Go to page</span>
        <input type="number" class="form-control" min="1" style="width: 5rem" aria-describedby="go-to-page" />
    </div>
</div>

Spacing

Flex utilities lay the groups out, for example justify-content-between to push them to both ends:

<twig:Tabler:ButtonToolbar aria-label="Customer list toolbar" class="justify-content-between gap-2">
    <twig:Tabler:ButtonGroup aria-label="Selection">
        <twig:Tabler:Button variant="default">Select all</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Clear</twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="Bulk actions">
        <twig:Tabler:Button variant="default">Tag</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Export</twig:Tabler:Button>
        <twig:Tabler:Button variant="danger" appearance="outline">Delete</twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
</twig:Tabler:ButtonToolbar>

<div class="btn-toolbar justify-content-between gap-2" role="toolbar" aria-label="Customer list toolbar">
    <div class="btn-group" role="group" aria-label="Selection">
        <button type="button" class="btn">Select all</button>
        <button type="button" class="btn">Clear</button>
    </div>
    <div class="btn-group" role="group" aria-label="Bulk actions">
        <button type="button" class="btn">Tag</button>
        <button type="button" class="btn">Export</button>
        <button type="button" class="btn btn-outline-danger">Delete</button>
    </div>
</div>

Props

The component has no props. Other attributes go to the root <div class="btn-toolbar" role="toolbar">: a class is added to btn-toolbar, a role replaces toolbar.

Blocks

Block	Default
`content`	Empty: the children, the button groups