ButtonActions

Groups the small icon buttons that act on one item: edit, download, delete. Put Buttons with appearance="action" in it: each one is a square, borderless icon button that only shows a background on hover (btn-action). The wrapper lines them up in a row (btn-actions), without a gap: each button is a square larger than its icon, which leaves room between the icons. Both are hidden when the page is printed.

<twig:Tabler:Card>
    <twig:Tabler:Card:Header>
        <twig:Tabler:Card:Title>Invoice INV-0142</twig:Tabler:Card:Title>
        <twig:Tabler:Card:Actions>
            <twig:Tabler:ButtonActions>
                <twig:Tabler:Button appearance="action" href="/invoices/142/edit" aria-label="Edit"><twig:Tabler:Icon name="edit" /></twig:Tabler:Button>
                <twig:Tabler:Button appearance="action" href="/invoices/142.pdf" aria-label="Download"><twig:Tabler:Icon name="download" /></twig:Tabler:Button>
                <twig:Tabler:Button appearance="action" aria-label="Delete"><twig:Tabler:Icon name="trash" /></twig:Tabler:Button>
            </twig:Tabler:ButtonActions>
        </twig:Tabler:Card:Actions>
    </twig:Tabler:Card:Header>
    <twig:Tabler:Card:Body>Acme Corp, €1,250.00, due on November 1.</twig:Tabler:Card:Body>
</twig:Tabler:Card>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Invoice INV-0142</h3>
        <div class="card-actions">
            <div class="btn-actions">
                <a href="/invoices/142/edit" class="btn btn-action" role="button" aria-label="Edit">
                    <i class="ti ti-edit"></i>
                </a>
                <a href="/invoices/142.pdf" class="btn btn-action" role="button" aria-label="Download">
                    <i class="ti ti-download"></i>
                </a>
                <button type="button" class="btn btn-action" aria-label="Delete"><i class="ti ti-trash"></i></button>
            </div>
        </div>
    </div>
    <div class="card-body">Acme Corp, €1,250.00, due on November 1.</div>
</div>

An action button has no text, so give each one an aria-label.

In a table

Put the actions in the last cell of each row, and name the item in each aria-label. A dropdown fits in too: give its Dropdown:Toggle the btn-action class and noCaret:

<twig:Tabler:Table vcenter="{{ true }}">
    <thead>
        <tr><th>Invoice</th><th>Customer</th><th class="w-1"><span class="visually-hidden">Actions</span></th></tr>
    </thead>
    <tbody>
        {% for invoice in [{number: 'INV-0142', customer: 'Acme Corp'}, {number: 'INV-0143', customer: 'Globex'}] %}
            <tr>
                <td>{{ invoice.number }}</td>
                <td>{{ invoice.customer }}</td>
                <td>
                    <twig:Tabler:ButtonActions>
                        <twig:Tabler:Button appearance="action" href="/invoices/{{ invoice.number }}/edit" aria-label="Edit {{ invoice.number }}"><twig:Tabler:Icon name="edit" /></twig:Tabler:Button>
                        <twig:Tabler:Dropdown>
                            <twig:Tabler:Dropdown:Toggle noCaret="{{ true }}" class="btn-action" aria-label="More actions for {{ invoice.number }}"><twig:Tabler:Icon name="dots-vertical" /></twig:Tabler:Dropdown:Toggle>
                            <twig:Tabler:Dropdown:Menu end="{{ true }}">
                                <twig:Tabler:Dropdown:Item href="/invoices/{{ invoice.number }}/duplicate">Duplicate</twig:Tabler:Dropdown:Item>
                                <twig:Tabler:Dropdown:Item href="/invoices/{{ invoice.number }}/cancel">Cancel</twig:Tabler:Dropdown:Item>
                            </twig:Tabler:Dropdown:Menu>
                        </twig:Tabler:Dropdown>
                    </twig:Tabler:ButtonActions>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</twig:Tabler:Table>

<div class="table-responsive">
    <table class="table table-vcenter">
        <thead>
            <tr>
                <th>Invoice</th>
                <th>Customer</th>
                <th class="w-1"><span class="visually-hidden">Actions</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>INV-0142</td>
                <td>Acme Corp</td>
                <td>
                    <div class="btn-actions">
                        <a
                            href="/invoices/INV-0142/edit"
                            class="btn btn-action"
                            role="button"
                            aria-label="Edit INV-0142"
                        >
                            <i class="ti ti-edit"></i>
                        </a>
                        <div class="dropdown">
                            <button
                                type="button"
                                class="btn btn-action"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                                aria-label="More actions for INV-0142"
                            >
                                <i class="ti ti-dots-vertical"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a href="/invoices/INV-0142/duplicate" class="dropdown-item">Duplicate</a>
                                <a href="/invoices/INV-0142/cancel" class="dropdown-item">Cancel</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>INV-0143</td>
                <td>Globex</td>
                <td>
                    <div class="btn-actions">
                        <a
                            href="/invoices/INV-0143/edit"
                            class="btn btn-action"
                            role="button"
                            aria-label="Edit INV-0143"
                        >
                            <i class="ti ti-edit"></i>
                        </a>
                        <div class="dropdown">
                            <button
                                type="button"
                                class="btn btn-action"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                                aria-label="More actions for INV-0143"
                            >
                                <i class="ti ti-dots-vertical"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a href="/invoices/INV-0143/duplicate" class="dropdown-item">Duplicate</a>
                                <a href="/invoices/INV-0143/cancel" class="dropdown-item">Cancel</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Props

ButtonActions has no props. Other attributes go to the root <div class="btn-actions">.

Blocks

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