ButtonGroup

Joins its children into one bar with shared borders, Bootstrap’s btn-group. The root gets role="group": give it an aria-label naming what the buttons control. Pass variant="default" to each Button for Tabler’s neutral look, since Button defaults to primary.

<twig:Tabler:ButtonGroup aria-label="Invoice actions">
    <twig:Tabler:Button variant="default">Edit</twig:Tabler:Button>
    <twig:Tabler:Button variant="default">Duplicate</twig:Tabler:Button>
    <twig:Tabler:Button variant="default">Archive</twig:Tabler:Button>
</twig:Tabler:ButtonGroup>

<div class="btn-group" role="group" aria-label="Invoice actions">
    <button type="button" class="btn">Edit</button>
    <button type="button" class="btn">Duplicate</button>
    <button type="button" class="btn">Archive</button>
</div>

Radio toggles

ButtonGroup:Toggle renders a hidden <input class="btn-check"> followed by its <label class="btn">. It is a radio by default: give the toggles of one group the same name. checked selects one, disabled grays it out:

<twig:Tabler:ButtonGroup aria-label="Report period">
    <twig:Tabler:ButtonGroup:Toggle id="period-day" name="period" value="day">Day</twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="period-week" name="period" value="week" checked="{{ true }}">Week</twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="period-month" name="period" value="month">Month</twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="period-year" name="period" value="year" disabled="{{ true }}">Year</twig:Tabler:ButtonGroup:Toggle>
</twig:Tabler:ButtonGroup>

<div class="btn-group" role="group" aria-label="Report period">
    <input type="radio" class="btn-check" id="period-day" name="period" value="day" autocomplete="off" />
    <label class="btn" for="period-day">Day</label>
    <input type="radio" class="btn-check" id="period-week" name="period" value="week" checked autocomplete="off" />
    <label class="btn" for="period-week">Week</label>
    <input type="radio" class="btn-check" id="period-month" name="period" value="month" autocomplete="off" />
    <label class="btn" for="period-month">Month</label>
    <input type="radio" class="btn-check" id="period-year" name="period" value="year" disabled autocomplete="off" />
    <label class="btn" for="period-year">Year</label>
</div>

The id prop is required, since the label points to the input with for. The browser handles the selection: no JavaScript is needed, and the value is submitted with the enclosing form.

Checkboxes

type="checkbox" lets several toggles be on at once. The label comes from the children or from the label prop:

<twig:Tabler:ButtonGroup aria-label="Notification channels">
    <twig:Tabler:ButtonGroup:Toggle id="channel-email" type="checkbox" name="channels[]" value="email" variant="primary" appearance="outline" checked="{{ true }}" label="Email" />
    <twig:Tabler:ButtonGroup:Toggle id="channel-sms" type="checkbox" name="channels[]" value="sms" variant="primary" appearance="outline" label="SMS" />
    <twig:Tabler:ButtonGroup:Toggle id="channel-push" type="checkbox" name="channels[]" value="push" variant="primary" appearance="outline" checked="{{ true }}" label="Push" />
</twig:Tabler:ButtonGroup>

<div class="btn-group" role="group" aria-label="Notification channels">
    <input
        type="checkbox"
        class="btn-check"
        id="channel-email"
        name="channels[]"
        value="email"
        checked
        autocomplete="off"
    />
    <label class="btn btn-outline-primary" for="channel-email">Email</label>
    <input type="checkbox" class="btn-check" id="channel-sms" name="channels[]" value="sms" autocomplete="off" />
    <label class="btn btn-outline-primary" for="channel-sms">SMS</label>
    <input
        type="checkbox"
        class="btn-check"
        id="channel-push"
        name="channels[]"
        value="push"
        checked
        autocomplete="off"
    />
    <label class="btn btn-outline-primary" for="channel-push">Push</label>
</div>

Variants and appearances

A toggle takes the same variant and appearance values as Button, but defaults to variant="default", the neutral button. The checked toggle shows the active state of its color:

<div class="btn-list">
    <twig:Tabler:ButtonGroup aria-label="Status filter">
        <twig:Tabler:ButtonGroup:Toggle id="status-all" name="status" value="all" variant="primary" checked="{{ true }}">All</twig:Tabler:ButtonGroup:Toggle>
        <twig:Tabler:ButtonGroup:Toggle id="status-paid" name="status" value="paid" variant="primary">Paid</twig:Tabler:ButtonGroup:Toggle>
        <twig:Tabler:ButtonGroup:Toggle id="status-overdue" name="status" value="overdue" variant="primary">Overdue</twig:Tabler:ButtonGroup:Toggle>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="Customer type">
        <twig:Tabler:ButtonGroup:Toggle id="customer-all" name="customer" value="all" appearance="outline" checked="{{ true }}">All</twig:Tabler:ButtonGroup:Toggle>
        <twig:Tabler:ButtonGroup:Toggle id="customer-company" name="customer" value="company" appearance="outline">Companies</twig:Tabler:ButtonGroup:Toggle>
        <twig:Tabler:ButtonGroup:Toggle id="customer-person" name="customer" value="person" appearance="outline">Individuals</twig:Tabler:ButtonGroup:Toggle>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="Sort order">
        <twig:Tabler:ButtonGroup:Toggle id="sort-newest" name="sort" value="newest" appearance="ghost" checked="{{ true }}">Newest</twig:Tabler:ButtonGroup:Toggle>
        <twig:Tabler:ButtonGroup:Toggle id="sort-oldest" name="sort" value="oldest" appearance="ghost">Oldest</twig:Tabler:ButtonGroup:Toggle>
    </twig:Tabler:ButtonGroup>
</div>

<div class="btn-list">
    <div class="btn-group" role="group" aria-label="Status filter">
        <input type="radio" class="btn-check" id="status-all" name="status" value="all" checked autocomplete="off" />
        <label class="btn btn-primary" for="status-all">All</label>
        <input type="radio" class="btn-check" id="status-paid" name="status" value="paid" autocomplete="off" />
        <label class="btn btn-primary" for="status-paid">Paid</label>
        <input type="radio" class="btn-check" id="status-overdue" name="status" value="overdue" autocomplete="off" />
        <label class="btn btn-primary" for="status-overdue">Overdue</label>
    </div>
    <div class="btn-group" role="group" aria-label="Customer type">
        <input
            type="radio"
            class="btn-check"
            id="customer-all"
            name="customer"
            value="all"
            checked
            autocomplete="off"
        />
        <label class="btn btn-outline" for="customer-all">All</label>
        <input
            type="radio"
            class="btn-check"
            id="customer-company"
            name="customer"
            value="company"
            autocomplete="off"
        />
        <label class="btn btn-outline" for="customer-company">Companies</label>
        <input type="radio" class="btn-check" id="customer-person" name="customer" value="person" autocomplete="off" />
        <label class="btn btn-outline" for="customer-person">Individuals</label>
    </div>
    <div class="btn-group" role="group" aria-label="Sort order">
        <input type="radio" class="btn-check" id="sort-newest" name="sort" value="newest" checked autocomplete="off" />
        <label class="btn btn-ghost" for="sort-newest">Newest</label>
        <input type="radio" class="btn-check" id="sort-oldest" name="sort" value="oldest" autocomplete="off" />
        <label class="btn btn-ghost" for="sort-oldest">Oldest</label>
    </div>
</div>

Sizes

size sizes every button of the group (btn-group-sm, btn-group-lg). Toggles have no size of their own:

<div class="btn-list align-items-center">
    <twig:Tabler:ButtonGroup size="sm" aria-label="Small">
        <twig:Tabler:Button variant="default">Previous</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Next</twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="Medium">
        <twig:Tabler:Button variant="default">Previous</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Next</twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup size="lg" aria-label="Large">
        <twig:Tabler:Button variant="default">Previous</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Next</twig:Tabler:Button>
    </twig:Tabler:ButtonGroup>
</div>

<div class="btn-list align-items-center">
    <div class="btn-group btn-group-sm" role="group" aria-label="Small">
        <button type="button" class="btn">Previous</button>
        <button type="button" class="btn">Next</button>
    </div>
    <div class="btn-group" role="group" aria-label="Medium">
        <button type="button" class="btn">Previous</button>
        <button type="button" class="btn">Next</button>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Large">
        <button type="button" class="btn">Previous</button>
        <button type="button" class="btn">Next</button>
    </div>
</div>

Vertical

vertical stacks the buttons (btn-group-vertical, instead of btn-group):

<twig:Tabler:ButtonGroup vertical="{{ true }}" aria-label="Account sections">
    <twig:Tabler:ButtonGroup:Toggle id="section-profile" name="section" value="profile" checked="{{ true }}">Profile</twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="section-security" name="section" value="security">Security</twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="section-billing" name="section" value="billing">Billing</twig:Tabler:ButtonGroup:Toggle>
</twig:Tabler:ButtonGroup>

<div class="btn-group-vertical" role="group" aria-label="Account sections">
    <input
        type="radio"
        class="btn-check"
        id="section-profile"
        name="section"
        value="profile"
        checked
        autocomplete="off"
    />
    <label class="btn" for="section-profile">Profile</label>
    <input type="radio" class="btn-check" id="section-security" name="section" value="security" autocomplete="off" />
    <label class="btn" for="section-security">Security</label>
    <input type="radio" class="btn-check" id="section-billing" name="section" value="billing" autocomplete="off" />
    <label class="btn" for="section-billing">Billing</label>
</div>

Icons

Put an icon in the toggle and add the btn-icon class. The class attribute goes to the <label>, the visible button; every other attribute goes to the <input>, so aria-label names the input that receives focus:

<twig:Tabler:ButtonGroup aria-label="Text alignment">
    <twig:Tabler:ButtonGroup:Toggle id="align-left" name="align" value="left" class="btn-icon" aria-label="Align left" checked="{{ true }}">
        <twig:Tabler:Icon name="align-left" class="icon" />
    </twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="align-center" name="align" value="center" class="btn-icon" aria-label="Align center">
        <twig:Tabler:Icon name="align-center" class="icon" />
    </twig:Tabler:ButtonGroup:Toggle>
    <twig:Tabler:ButtonGroup:Toggle id="align-right" name="align" value="right" class="btn-icon" aria-label="Align right">
        <twig:Tabler:Icon name="align-right" class="icon" />
    </twig:Tabler:ButtonGroup:Toggle>
</twig:Tabler:ButtonGroup>

<div class="btn-group" role="group" aria-label="Text alignment">
    <input
        type="radio"
        class="btn-check"
        id="align-left"
        name="align"
        value="left"
        checked
        autocomplete="off"
        aria-label="Align left"
    />
    <label class="btn btn-icon" for="align-left"><i class="ti ti-align-left icon"></i></label>
    <input
        type="radio"
        class="btn-check"
        id="align-center"
        name="align"
        value="center"
        autocomplete="off"
        aria-label="Align center"
    />
    <label class="btn btn-icon" for="align-center"><i class="ti ti-align-center icon"></i></label>
    <input
        type="radio"
        class="btn-check"
        id="align-right"
        name="align"
        value="right"
        autocomplete="off"
        aria-label="Align right"
    />
    <label class="btn btn-icon" for="align-right"><i class="ti ti-align-right icon"></i></label>
</div>

Dropdowns

To put a dropdown in a group, give the Dropdown the btn-group class and role="group". For a split button, put a Dropdown:Toggle with split right after the main button, followed by its Dropdown:Menu: the group wraps the dropdown, so no Dropdown is needed.

<div class="btn-list">
    <twig:Tabler:ButtonGroup aria-label="Order actions">
        <twig:Tabler:Button variant="default">Edit</twig:Tabler:Button>
        <twig:Tabler:Button variant="default">Print</twig:Tabler:Button>
        <twig:Tabler:Dropdown class="btn-group" role="group">
            <twig:Tabler:Dropdown:Toggle>More</twig:Tabler:Dropdown:Toggle>
            <twig:Tabler:Dropdown:Menu>
                <twig:Tabler:Dropdown:Item href="/orders/1042/refund">Refund</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item href="/orders/1042/cancel" class="text-danger">Cancel order</twig:Tabler:Dropdown:Item>
            </twig:Tabler:Dropdown:Menu>
        </twig:Tabler:Dropdown>
    </twig:Tabler:ButtonGroup>
    <twig:Tabler:ButtonGroup aria-label="Save options">
        <twig:Tabler:Button variant="primary">Save</twig:Tabler:Button>
        <twig:Tabler:Dropdown:Toggle variant="primary" split="{{ true }}" aria-label="More save options" />
        <twig:Tabler:Dropdown:Menu>
            <twig:Tabler:Dropdown:Item>Save as draft</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item>Save and send</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:ButtonGroup>
</div>

<div class="btn-list">
    <div class="btn-group" role="group" aria-label="Order actions">
        <button type="button" class="btn">Edit</button>
        <button type="button" class="btn">Print</button>
        <div class="dropdown btn-group" role="group">
            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                More
            </button>
            <div class="dropdown-menu">
                <a href="/orders/1042/refund" class="dropdown-item">Refund</a>
                <a href="/orders/1042/cancel" class="dropdown-item text-danger">Cancel order</a>
            </div>
        </div>
    </div>
    <div class="btn-group" role="group" aria-label="Save options">
        <button type="button" class="btn btn-primary">Save</button>
        <button
            type="button"
            class="btn btn-primary dropdown-toggle dropdown-toggle-split"
            data-bs-toggle="dropdown"
            aria-expanded="false"
            aria-label="More save options"
        ></button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Save as draft</a>
            <a href="#" class="dropdown-item">Save and send</a>
        </div>
    </div>
</div>

Props

Prop	Type	Default	Description
`vertical`	bool	`false`	Stacks the buttons (`btn-group-vertical`)
`size`	string	`'md'`	`sm` `md` `lg` (`btn-group-sm`, `btn-group-lg`)

Other attributes go to the root <div class="btn-group">. role="group" is a default: pass role to replace it.

Sub-components

Component	Renders
`ButtonGroup:Toggle`	`<input class="btn-check" autocomplete="off">` followed by `<label class="btn">`

ButtonGroup:Toggle takes these props:

Prop	Type	Default	Description
`id`	string		Input `id`, referenced by the label’s `for`. Required
`name`	string?	`null`	Input `name`, shared by the radios of one group
`value`	string?	`null`	Input `value`
`type`	string	`'radio'`	`radio` `checkbox`
`checked`	bool	`false`	Selected state (`checked` attribute)
`disabled`	bool	`false`	Inactive state (`disabled` attribute)
`label`	string?	`null`	Label text, rendered in the `content` block
`variant`	string	`'default'`	`default` (neutral) `primary` `secondary` `success` `danger` `warning` `info` `dark` `light`
`appearance`	string	`'filled'`	`filled` `outline` `ghost`

The class attribute goes to the <label>, and so do the attributes prefixed with label:, such as label:title or label:data-bs-toggle="tooltip" for a tooltip on the visible button. Other attributes (aria-label, data-*, required, form…) go to the <input>.

Blocks

Component	Block	Default
`ButtonGroup`	`content`	Empty: the children, the buttons
`ButtonGroup:Toggle`	`content`	The `label` prop