Button Group - Launchpad

Basic Button Group

<div class="lp-btn-group" role="group" aria-label="Basic example">
    <button type="button" class="lp-btn lp-btn-primary">Left</button>
    <button type="button" class="lp-btn lp-btn-primary">Middle</button>
    <button type="button" class="lp-btn lp-btn-primary">Right</button>
</div>

Outline Button Group

<div class="lp-btn-group" role="group" aria-label="Outline example">
    <button type="button" class="lp-btn lp-btn-outline-primary">Left</button>
    <button type="button" class="lp-btn lp-btn-outline-primary">Middle</button>
    <button type="button" class="lp-btn lp-btn-outline-primary">Right</button>
</div>

Mixed Color Group

<div class="lp-btn-group" role="group" aria-label="Color variants">
    <button type="button" class="lp-btn lp-btn-secondary">Secondary</button>
    <button type="button" class="lp-btn lp-btn-success">Success</button>
    <button type="button" class="lp-btn lp-btn-danger">Danger</button>
</div>

Icon Button Groups

Compose groups from icon-only buttons for toolbars (text formatting, alignment, pagination).

<p class="lp-text-sm lp-text-muted lp-mb-3">Compose groups from icon-only buttons for toolbars (text formatting, alignment, pagination).</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <div class="lp-btn-group" role="group" aria-label="Text formatting">
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Bold"><span class="material-symbols-rounded">format_bold</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Italic"><span class="material-symbols-rounded">format_italic</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Underline"><span class="material-symbols-rounded">format_underlined</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Strikethrough"><span class="material-symbols-rounded">format_strikethrough</span></button>
    </div>
    <div class="lp-btn-group" role="group" aria-label="Text alignment">
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Align left"><span class="material-symbols-rounded">format_align_left</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Align center"><span class="material-symbols-rounded">format_align_center</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Align right"><span class="material-symbols-rounded">format_align_right</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Justify"><span class="material-symbols-rounded">format_align_justify</span></button>
    </div>
    <div class="lp-btn-group" role="group" aria-label="Pagination">
        <button type="button" class="lp-btn lp-btn-outline-primary" aria-label="Previous"><span class="material-symbols-rounded">chevron_left</span></button>
        <button type="button" class="lp-btn lp-btn-outline-primary" aria-label="Next"><span class="material-symbols-rounded">chevron_right</span></button>
    </div>
</div>

Mixed Content (Text + Icon)

<div class="lp-btn-group" role="group" aria-label="File actions">
    <button type="button" class="lp-btn lp-btn-primary"><span class="material-symbols-rounded">save</span> Save</button>
    <button type="button" class="lp-btn lp-btn-primary"><span class="material-symbols-rounded">content_copy</span> Copy</button>
    <button type="button" class="lp-btn lp-btn-danger"><span class="material-symbols-rounded">delete</span> Delete</button>
</div>

Sizes

Use .lp-btn-group-xs, .lp-btn-group-sm, .lp-btn-group-lg, or .lp-btn-group-xl. The group corners track the child button radius automatically (--lp-btn-border-radius).

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-code">.lp-btn-group-xs</code>, <code class="lp-code">.lp-btn-group-sm</code>, <code class="lp-code">.lp-btn-group-lg</code>, or <code class="lp-code">.lp-btn-group-xl</code>. The group corners track the child button radius automatically (<code class="lp-code">--lp-btn-border-radius</code>).</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <div class="lp-btn-group lp-btn-group-xs" role="group">
        <button type="button" class="lp-btn lp-btn-outline-primary">XS</button>
        <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
    </div>
    <div class="lp-btn-group lp-btn-group-sm" role="group">
        <button type="button" class="lp-btn lp-btn-outline-primary">Small</button>
        <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
    </div>
    <div class="lp-btn-group" role="group">
        <button type="button" class="lp-btn lp-btn-outline-primary">Default</button>
        <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
    </div>
    <div class="lp-btn-group lp-btn-group-lg" role="group">
        <button type="button" class="lp-btn lp-btn-outline-primary">Large</button>
        <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
    </div>
    <div class="lp-btn-group lp-btn-group-xl" role="group">
        <button type="button" class="lp-btn lp-btn-outline-primary">XL</button>
        <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
    </div>
</div>

Icon Group Sizes

Square icon-only groups scale uniformly; outer corners still round to match the button radius.

<p class="lp-text-sm lp-text-muted lp-mb-3">Square icon-only groups scale uniformly; outer corners still round to match the button radius.</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <div class="lp-btn-group lp-btn-group-sm" role="group">
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Bold"><span class="material-symbols-rounded">format_bold</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Italic"><span class="material-symbols-rounded">format_italic</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Underline"><span class="material-symbols-rounded">format_underlined</span></button>
    </div>
    <div class="lp-btn-group" role="group">
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Bold"><span class="material-symbols-rounded">format_bold</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Italic"><span class="material-symbols-rounded">format_italic</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Underline"><span class="material-symbols-rounded">format_underlined</span></button>
    </div>
    <div class="lp-btn-group lp-btn-group-lg" role="group">
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Bold"><span class="material-symbols-rounded">format_bold</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Italic"><span class="material-symbols-rounded">format_italic</span></button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Underline"><span class="material-symbols-rounded">format_underlined</span></button>
    </div>
</div>

Vertical Group

<div class="lp-btn-group lp-btn-group-vertical" role="group" aria-label="Vertical example">
    <button type="button" class="lp-btn lp-btn-primary">Top</button>
    <button type="button" class="lp-btn lp-btn-primary">Middle</button>
    <button type="button" class="lp-btn lp-btn-primary">Bottom</button>
</div>

Block (Full-Width) Group

<div class="lp-btn-group lp-btn-group-block" role="group" aria-label="Block example">
    <button type="button" class="lp-btn lp-btn-outline-secondary">Full Width</button>
    <button type="button" class="lp-btn lp-btn-outline-secondary">Buttons</button>
    <button type="button" class="lp-btn lp-btn-outline-secondary">Spread</button>
</div>

Block Group Variants

Block groups work with every color variant and size. Combine with .lp-btn-group-sm / .lp-btn-group-lg.

<p class="lp-text-sm lp-text-muted lp-mb-3">Block groups work with every color variant and size. Combine with <code class="lp-code">.lp-btn-group-sm</code> / <code class="lp-code">.lp-btn-group-lg</code>.</p>
<div class="lp-btn-group lp-btn-group-block lp-mb-3" role="group" aria-label="Yes/No">
    <button type="button" class="lp-btn lp-btn-primary">Yes</button>
    <button type="button" class="lp-btn lp-btn-danger">No</button>
</div>
<div class="lp-btn-group lp-btn-group-block lp-mb-3" role="group" aria-label="Approve/Pending/Reject">
    <button type="button" class="lp-btn lp-btn-success">Approve</button>
    <button type="button" class="lp-btn lp-btn-warning">Pending</button>
    <button type="button" class="lp-btn lp-btn-danger">Reject</button>
</div>
<div class="lp-btn-group lp-btn-group-block lp-btn-group-sm lp-mb-3" role="group" aria-label="Small block">
    <button type="button" class="lp-btn lp-btn-outline-primary">Small block</button>
    <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
</div>
<div class="lp-btn-group lp-btn-group-block lp-btn-group-lg" role="group" aria-label="Large block">
    <button type="button" class="lp-btn lp-btn-outline-primary">Large block</button>
    <button type="button" class="lp-btn lp-btn-outline-primary">Group</button>
</div>

Toggle Buttons (Radio)

Click to toggle. Only one can be active at a time (radio behavior).

Active Inactive Inactive

<p class="lp-text-sm lp-text-muted lp-mb-3">Click to toggle. Only one can be active at a time (radio behavior).</p>
<div class="lp-btn-group" role="group" aria-label="Radio toggle group">
    <input type="radio" class="lp-btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="lp-btn lp-btn-outline-primary" for="btnradio1">Active</label>
    <input type="radio" class="lp-btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="lp-btn lp-btn-outline-primary" for="btnradio2">Inactive</label>
    <input type="radio" class="lp-btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="lp-btn lp-btn-outline-primary" for="btnradio3">Inactive</label>
</div>

Toggle Buttons (Checkbox)

Click to toggle. Multiple can be active at the same time (checkbox behavior).

Checked Unchecked Checked

<p class="lp-text-sm lp-text-muted lp-mb-3">Click to toggle. Multiple can be active at the same time (checkbox behavior).</p>
<div class="lp-btn-group" role="group" aria-label="Checkbox toggle group">
    <input type="checkbox" class="lp-btn-check" id="btncheck1" autocomplete="off">
    <label class="lp-btn lp-btn-outline-success" for="btncheck1">Checked</label>
    <input type="checkbox" class="lp-btn-check" id="btncheck2" autocomplete="off">
    <label class="lp-btn lp-btn-outline-success" for="btncheck2">Unchecked</label>
    <input type="checkbox" class="lp-btn-check" id="btncheck3" autocomplete="off" checked>
    <label class="lp-btn lp-btn-outline-success" for="btncheck3">Checked</label>
</div>

Contextual Toggle Buttons

Each button can carry its own contextual color — useful for priority/severity pickers.

Low Medium High

<p class="lp-text-sm lp-text-muted lp-mb-3">Each button can carry its own contextual color — useful for priority/severity pickers.</p>
<div class="lp-btn-group" role="group" aria-label="Priority">
    <input type="radio" class="lp-btn-check" name="priority" id="prio-low" autocomplete="off" checked>
    <label class="lp-btn lp-btn-outline-success" for="prio-low">Low</label>
    <input type="radio" class="lp-btn-check" name="priority" id="prio-med" autocomplete="off">
    <label class="lp-btn lp-btn-outline-warning" for="prio-med">Medium</label>
    <input type="radio" class="lp-btn-check" name="priority" id="prio-high" autocomplete="off">
    <label class="lp-btn lp-btn-outline-danger" for="prio-high">High</label>
</div>

Toggle Buttons (Custom On/Off Variants)

Declare both states directly in markup with data-lp-btn-off and data-lp-btn-on on the <label>. Accepts any solid (primary, success, …) or outline (outline-primary, …) color name. No JS needed — CSS swaps the variant as the input toggles.

Heart / favorite (outline-danger → danger)

favorite Favorite favorite Favorited

Radio group (outline-secondary → success)

Online Away Offline

Per-button variants (each option picks its own on-color)

Low Medium High

Checkbox group (ghost-like off → info on)

wifi Wi-Fi bluetooth Bluetooth location_on Location

<p class="lp-text-sm lp-text-muted lp-mb-3">Declare both states directly in markup with <code class="lp-code">data-lp-btn-off</code> and <code class="lp-code">data-lp-btn-on</code> on the <code class="lp-code">&lt;label&gt;</code>. Accepts any solid (<code class="lp-code">primary</code>, <code class="lp-code">success</code>, …) or outline (<code class="lp-code">outline-primary</code>, …) color name. No JS needed — CSS swaps the variant as the input toggles.</p>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-uppercase lp-mt-4 lp-mb-2">Heart / favorite (outline-danger &rarr; danger)</p>
<div class="lp-demo-row lp-items-center lp-gap-3 lp-mb-4">
    <input type="checkbox" class="lp-btn-check" id="toggleFav1" autocomplete="off">
    <label class="lp-btn" data-lp-btn-off="outline-danger" data-lp-btn-on="danger" for="toggleFav1">
        <span class="material-symbols-rounded lp-icon-sm">favorite</span> Favorite
    </label>
    <input type="checkbox" class="lp-btn-check" id="toggleFav2" autocomplete="off" checked>
    <label class="lp-btn" data-lp-btn-off="outline-danger" data-lp-btn-on="danger" for="toggleFav2">
        <span class="material-symbols-rounded lp-icon-sm">favorite</span> Favorited
    </label>
</div>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-uppercase lp-mt-4 lp-mb-2">Radio group (outline-secondary &rarr; success)</p>
<div class="lp-btn-group lp-mb-4" role="group" aria-label="Status radio group">
    <input type="radio" class="lp-btn-check" name="toggleStatus" id="toggleStatusOn" autocomplete="off" checked>
    <label class="lp-btn" data-lp-btn-off="outline-secondary" data-lp-btn-on="success" for="toggleStatusOn">Online</label>
    <input type="radio" class="lp-btn-check" name="toggleStatus" id="toggleStatusAway" autocomplete="off">
    <label class="lp-btn" data-lp-btn-off="outline-secondary" data-lp-btn-on="success" for="toggleStatusAway">Away</label>
    <input type="radio" class="lp-btn-check" name="toggleStatus" id="toggleStatusOff" autocomplete="off">
    <label class="lp-btn" data-lp-btn-off="outline-secondary" data-lp-btn-on="success" for="toggleStatusOff">Offline</label>
</div>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-uppercase lp-mt-4 lp-mb-2">Per-button variants (each option picks its own on-color)</p>
<div class="lp-btn-group lp-mb-4" role="group" aria-label="Priority radio group">
    <input type="radio" class="lp-btn-check" name="togglePriority" id="togglePriLow" autocomplete="off" checked>
    <label class="lp-btn" data-lp-btn-off="outline-secondary" data-lp-btn-on="success" for="togglePriLow">Low</label>
    <input type="radio" class="lp-btn-check" name="togglePriority" id="togglePriMed" autocomplete="off">
    <label class="lp-btn" data-lp-btn-off="outline-secondary" data-lp-btn-on="warning" for="togglePriMed">Medium</label>
    <input type="radio" class="lp-btn-check" name="togglePriority" id="togglePriHigh" autocomplete="off">
    <label class="lp-btn" data-lp-btn-off="outline-secondary" data-lp-btn-on="danger" for="togglePriHigh">High</label>
</div>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-uppercase lp-mt-4 lp-mb-2">Checkbox group (ghost-like off &rarr; info on)</p>
<div class="lp-btn-group" role="group" aria-label="Features checkbox group">
    <input type="checkbox" class="lp-btn-check" id="toggleFeatWifi" autocomplete="off" checked>
    <label class="lp-btn" data-lp-btn-off="outline-info" data-lp-btn-on="info" for="toggleFeatWifi">
        <span class="material-symbols-rounded lp-icon-sm">wifi</span> Wi-Fi
    </label>
    <input type="checkbox" class="lp-btn-check" id="toggleFeatBt" autocomplete="off">
    <label class="lp-btn" data-lp-btn-off="outline-info" data-lp-btn-on="info" for="toggleFeatBt">
        <span class="material-symbols-rounded lp-icon-sm">bluetooth</span> Bluetooth
    </label>
    <input type="checkbox" class="lp-btn-check" id="toggleFeatLoc" autocomplete="off" checked>
    <label class="lp-btn" data-lp-btn-off="outline-info" data-lp-btn-on="info" for="toggleFeatLoc">
        <span class="material-symbols-rounded lp-icon-sm">location_on</span> Location
    </label>
</div>

Toggle Button Sizes

On Off

<div class="lp-demo-row lp-items-center lp-gap-3">
    <div class="lp-btn-group lp-btn-group-sm" role="group" aria-label="Size sm toggle">
        <input type="radio" class="lp-btn-check" name="tsize-sm" id="tsize-sm-1" autocomplete="off" checked>
        <label class="lp-btn lp-btn-outline-primary" for="tsize-sm-1">On</label>
        <input type="radio" class="lp-btn-check" name="tsize-sm" id="tsize-sm-2" autocomplete="off">
        <label class="lp-btn lp-btn-outline-primary" for="tsize-sm-2">Off</label>
    </div>
    <div class="lp-btn-group" role="group" aria-label="Size default toggle">
        <input type="radio" class="lp-btn-check" name="tsize-md" id="tsize-md-1" autocomplete="off" checked>
        <label class="lp-btn lp-btn-outline-primary" for="tsize-md-1">On</label>
        <input type="radio" class="lp-btn-check" name="tsize-md" id="tsize-md-2" autocomplete="off">
        <label class="lp-btn lp-btn-outline-primary" for="tsize-md-2">Off</label>
    </div>
    <div class="lp-btn-group lp-btn-group-lg" role="group" aria-label="Size lg toggle">
        <input type="radio" class="lp-btn-check" name="tsize-lg" id="tsize-lg-1" autocomplete="off" checked>
        <label class="lp-btn lp-btn-outline-primary" for="tsize-lg-1">On</label>
        <input type="radio" class="lp-btn-check" name="tsize-lg" id="tsize-lg-2" autocomplete="off">
        <label class="lp-btn lp-btn-outline-primary" for="tsize-lg-2">Off</label>
    </div>
</div>

Vertical Toggle Group

Top Middle Bottom

Notifications Sound Vibration

<div class="lp-demo-row lp-items-start lp-gap-4">
    <div class="lp-btn-group lp-btn-group-vertical" role="group" aria-label="Alignment">
        <input type="radio" class="lp-btn-check" name="valign" id="valign-top" autocomplete="off" checked>
        <label class="lp-btn lp-btn-outline-primary" for="valign-top">Top</label>
        <input type="radio" class="lp-btn-check" name="valign" id="valign-mid" autocomplete="off">
        <label class="lp-btn lp-btn-outline-primary" for="valign-mid">Middle</label>
        <input type="radio" class="lp-btn-check" name="valign" id="valign-bot" autocomplete="off">
        <label class="lp-btn lp-btn-outline-primary" for="valign-bot">Bottom</label>
    </div>
    <div class="lp-btn-group lp-btn-group-vertical" role="group" aria-label="Alerts">
        <input type="checkbox" class="lp-btn-check" id="alert-notif" autocomplete="off" checked>
        <label class="lp-btn lp-btn-outline-success" for="alert-notif">Notifications</label>
        <input type="checkbox" class="lp-btn-check" id="alert-sound" autocomplete="off">
        <label class="lp-btn lp-btn-outline-success" for="alert-sound">Sound</label>
        <input type="checkbox" class="lp-btn-check" id="alert-vibe" autocomplete="off">
        <label class="lp-btn lp-btn-outline-success" for="alert-vibe">Vibration</label>
    </div>
</div>

Disabled States

Disable a single button or the whole group.

<p class="lp-text-sm lp-text-muted lp-mb-3">Disable a single button or the whole group.</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <div class="lp-btn-group" role="group" aria-label="Partial disabled">
        <button type="button" class="lp-btn lp-btn-primary">Active</button>
        <button type="button" class="lp-btn lp-btn-primary" disabled>Disabled</button>
        <button type="button" class="lp-btn lp-btn-primary">Active</button>
    </div>
    <div class="lp-btn-group" role="group" aria-label="All disabled">
        <button type="button" class="lp-btn lp-btn-outline-secondary" disabled>All</button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" disabled>Disabled</button>
        <button type="button" class="lp-btn lp-btn-outline-secondary" disabled>Group</button>
    </div>
</div>

Enforced Selection

Add data-lp-component="button-group" and data-lp-enforce-selection="true" to prevent the user from deselecting the last active option.

Email SMS Push

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-code">data-lp-component="button-group"</code> and <code class="lp-code">data-lp-enforce-selection="true"</code> to prevent the user from deselecting the last active option.</p>
<div class="lp-btn-group" role="group" aria-label="Notification channels" data-lp-component="button-group" data-lp-enforce-selection="true">
    <input type="checkbox" class="lp-btn-check" id="enf-email" autocomplete="off" checked>
    <label class="lp-btn lp-btn-outline-primary" for="enf-email">Email</label>
    <input type="checkbox" class="lp-btn-check" id="enf-sms" autocomplete="off">
    <label class="lp-btn lp-btn-outline-primary" for="enf-sms">SMS</label>
    <input type="checkbox" class="lp-btn-check" id="enf-push" autocomplete="off">
    <label class="lp-btn lp-btn-outline-primary" for="enf-push">Push</label>
</div>

JavaScript API

Control a group programmatically via the ButtonGroup class. Listen for lp:button-group:change for every state change.

Read Write Delete

value: []

const group = document.getElementById('my-group');
const inst  = Launchpad.ButtonGroup.create(group);

// Read
inst.getValue();               // => array of checked values (checkbox mode)

// Write
inst.setValue(['api-read', 'api-write']);
inst.toggle('api-delete');
inst.selectAll();
inst.deselectAll();

// Enable / disable (whole group or per-item)
inst.disable();
inst.enable();
inst.disableButton('api-read');
inst.enableButton('api-read');

// Events
group.addEventListener('lp:button-group:change', (e) => {
    console.log('value:', e.detail.value, 'source:', e.detail.source);
});
group.addEventListener('lp:button-group:select',   (e) => console.log('+', e.detail.value));
group.addEventListener('lp:button-group:deselect', (e) => console.log('-', e.detail.value));

Split Button

Combine an action button with a dropdown toggle. Click the button to perform the primary action; click the arrow to show options.

<p class="lp-text-sm lp-text-muted lp-mb-3">Combine an action button with a dropdown toggle. Click the button to perform the primary action; click the arrow to show options.</p>
<div class="lp-btn-group" role="group">
    <button type="button" class="lp-btn lp-btn-primary">Action</button>
    <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-primary lp-dropdown-toggle" aria-expanded="false">
            <span class="material-symbols-rounded">expand_more</span>
        </button>
        <div class="lp-dropdown-menu">
            <a class="lp-dropdown-item" href="#">Save as Draft</a>
            <a class="lp-dropdown-item" href="#">Archive</a>
            <div class="lp-dropdown-divider"></div>
            <a class="lp-dropdown-item" href="#">Delete</a>
        </div>
    </div>
</div>

Split Button Variants

Split buttons work with any color or outline variant.

<p class="lp-text-sm lp-text-muted lp-mb-3">Split buttons work with any color or outline variant.</p>
<div class="lp-demo-row lp-gap-3">
    <div class="lp-btn-group" role="group" aria-label="Approve">
        <button type="button" class="lp-btn lp-btn-success"><span class="material-symbols-rounded">check</span> Approve</button>
        <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
            <button type="button" class="lp-btn lp-btn-success lp-dropdown-toggle" aria-expanded="false">
                <span class="material-symbols-rounded">expand_more</span>
            </button>
            <div class="lp-dropdown-menu">
                <a class="lp-dropdown-item" href="#">Approve &amp; Notify</a>
                <a class="lp-dropdown-item" href="#">Approve Silently</a>
            </div>
        </div>
    </div>
    <div class="lp-btn-group" role="group" aria-label="Delete">
        <button type="button" class="lp-btn lp-btn-danger">Delete</button>
        <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
            <button type="button" class="lp-btn lp-btn-danger lp-dropdown-toggle" aria-expanded="false">
                <span class="material-symbols-rounded">expand_more</span>
            </button>
            <div class="lp-dropdown-menu">
                <a class="lp-dropdown-item" href="#">Move to Trash</a>
                <a class="lp-dropdown-item" href="#">Archive</a>
                <div class="lp-dropdown-divider"></div>
                <a class="lp-dropdown-item lp-dropdown-item-danger" href="#">Delete Permanently</a>
            </div>
        </div>
    </div>
    <div class="lp-btn-group" role="group" aria-label="Export">
        <button type="button" class="lp-btn lp-btn-outline-primary">Export</button>
        <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
            <button type="button" class="lp-btn lp-btn-outline-primary lp-dropdown-toggle" aria-expanded="false">
                <span class="material-symbols-rounded">expand_more</span>
            </button>
            <div class="lp-dropdown-menu">
                <a class="lp-dropdown-item" href="#">Export as CSV</a>
                <a class="lp-dropdown-item" href="#">Export as JSON</a>
                <a class="lp-dropdown-item" href="#">Export as PDF</a>
            </div>
        </div>
    </div>
</div>

Button Dropdown

A single button that opens a dropdown menu when clicked.

<p class="lp-text-sm lp-text-muted lp-mb-3">A single button that opens a dropdown menu when clicked.</p>
<div class="lp-demo-row lp-gap-3">
    <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-primary lp-dropdown-toggle" aria-expanded="false">
            Actions <span class="material-symbols-rounded">expand_more</span>
        </button>
        <div class="lp-dropdown-menu">
            <a class="lp-dropdown-item" href="#">Edit</a>
            <a class="lp-dropdown-item" href="#">Download</a>
            <a class="lp-dropdown-item" href="#">Share</a>
        </div>
    </div>
    <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-outline-secondary lp-dropdown-toggle" aria-expanded="false">
            More <span class="material-symbols-rounded">expand_more</span>
        </button>
        <div class="lp-dropdown-menu">
            <a class="lp-dropdown-item" href="#">Option 1</a>
            <a class="lp-dropdown-item" href="#">Option 2</a>
            <div class="lp-dropdown-divider"></div>
            <a class="lp-dropdown-item" href="#">Settings</a>
        </div>
    </div>
</div>

Dropdown Direction & Alignment

Mix .lp-dropdown-up (on the container, flip upward) with .lp-dropdown-end / .lp-dropdown-start (on the menu, align right/left). Default is down + start.

<p class="lp-text-sm lp-text-muted lp-mb-3">Mix <code class="lp-code">.lp-dropdown-up</code> (on the container, flip upward) with <code class="lp-code">.lp-dropdown-end</code> / <code class="lp-code">.lp-dropdown-start</code> (on the menu, align right/left). Default is down + start.</p>
<div class="lp-demo-row lp-gap-3 lp-mb-4">
    <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-outline-primary lp-dropdown-toggle" aria-expanded="false">
            Down &amp; Left <span class="material-symbols-rounded">expand_more</span>
        </button>
        <div class="lp-dropdown-menu lp-dropdown-start">
            <a class="lp-dropdown-item" href="#">First action</a>
            <a class="lp-dropdown-item" href="#">Second action</a>
            <a class="lp-dropdown-item" href="#">Third action</a>
        </div>
    </div>
    <div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-outline-primary lp-dropdown-toggle" aria-expanded="false">
            Down &amp; Right <span class="material-symbols-rounded">expand_more</span>
        </button>
        <div class="lp-dropdown-menu lp-dropdown-end">
            <a class="lp-dropdown-item" href="#">First action</a>
            <a class="lp-dropdown-item" href="#">Second action</a>
            <a class="lp-dropdown-item" href="#">Third action</a>
        </div>
    </div>
</div>
<div class="lp-demo-row lp-gap-3">
    <div class="lp-dropdown lp-dropdown-up" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-outline-primary lp-dropdown-toggle" aria-expanded="false">
            Up &amp; Left <span class="material-symbols-rounded">expand_less</span>
        </button>
        <div class="lp-dropdown-menu lp-dropdown-start">
            <a class="lp-dropdown-item" href="#">First action</a>
            <a class="lp-dropdown-item" href="#">Second action</a>
            <a class="lp-dropdown-item" href="#">Third action</a>
        </div>
    </div>
    <div class="lp-dropdown lp-dropdown-up" data-lp-component="dropdown" data-lp-toggle="click">
        <button type="button" class="lp-btn lp-btn-outline-primary lp-dropdown-toggle" aria-expanded="false">
            Up &amp; Right <span class="material-symbols-rounded">expand_less</span>
        </button>
        <div class="lp-dropdown-menu lp-dropdown-end">
            <a class="lp-dropdown-item" href="#">First action</a>
            <a class="lp-dropdown-item" href="#">Second action</a>
            <a class="lp-dropdown-item" href="#">Third action</a>
        </div>
    </div>
</div>

Dropdown Inside a Card

Cards clip overflow by default, which would cut off any dropdown menu opened inside them. Adding .lp-card-overflow-visible on the card (including this demo card itself) lets the menu paint beyond the card boundary.

<p class="lp-text-sm lp-text-muted lp-mb-3">Cards clip overflow by default, which would cut off any dropdown menu opened inside them. Adding <code class="lp-code">.lp-card-overflow-visible</code> on the card (including this demo card itself) lets the menu paint beyond the card boundary.</p>
<div class="lp-dropdown" data-lp-component="dropdown" data-lp-toggle="click">
    <button type="button" class="lp-btn lp-btn-primary lp-dropdown-toggle" aria-expanded="false">
        Choose action <span class="material-symbols-rounded">expand_more</span>
    </button>
    <div class="lp-dropdown-menu">
        <a class="lp-dropdown-item" href="#">Edit</a>
        <a class="lp-dropdown-item" href="#">Duplicate</a>
        <a class="lp-dropdown-item" href="#">Share</a>
        <div class="lp-dropdown-divider"></div>
        <a class="lp-dropdown-item lp-dropdown-item-danger" href="#">Delete</a>
    </div>
</div>

CSS Class & API Reference

Button Group Base

Class / API	Description
`.lp-btn-group`	Container for grouped buttons

Layouts

Class / API	Description
`.lp-btn-group-vertical`	Stack buttons vertically
`.lp-btn-group-block`	Full-width buttons (flex: 1)

Sizes

Class / API	Description
`.lp-btn-group-xs`	Extra-small button group
`.lp-btn-group-sm`	Small button group
`.lp-btn-group-lg`	Large button group
`.lp-btn-group-xl`	Extra-large button group

Radius

Class / API	Description
`--lp-btn-border-radius`	CSS variable inherited from child .lp-btn — outer group corners track this value automatically

Toggle Buttons

Class / API	Description
`.lp-btn-check`	Hidden radio/checkbox input (with label)
`<input type="radio">`	For radio (one selected) behavior
`<input type="checkbox">`	For checkbox (multi-select) behavior
`data-lp-btn-off="<variant>"`	Variant applied to the label while input is unchecked (e.g. outline-primary)
`data-lp-btn-on="<variant>"`	Variant applied to the label while input is checked (e.g. success, danger)

Split Button

Class / API	Description
`.lp-btn-group > .lp-btn + .lp-dropdown`	Button + Dropdown in a group
`.lp-dropdown`	Wrapper for dropdown toggle button

Dropdowns

Class / API	Description
`.lp-dropdown`	Container for dropdown trigger + menu
`.lp-dropdown-menu`	Menu popup (shown on click/hover)
`.lp-dropdown-item`	Individual menu item (link or action)
`.lp-dropdown-divider`	Visual separator in menu
`.lp-dropdown-up`	Open menu upward
`.lp-dropdown-start`	Align menu to the left (default)
`.lp-dropdown-end`	Align menu to the right

JavaScript API

Class / API	Description
`data-lp-component="button-group"`	Attribute that auto-inits ButtonGroup on a .lp-btn-group
`data-lp-enforce-selection`	Prevent deselecting the last active item (checkbox / button modes)
`getValue()`	Returns current value (single value for radio, array for checkbox/button)
`setValue(value)`	Programmatically set the selection
`toggle(value)`	Flip a single item (checkbox/button only)
`selectAll() / deselectAll()`	Check/uncheck every item (checkbox/button only)
`disable() / enable()`	Toggle disabled on every button and input
`disableButton(value) / enableButton(value)`	Per-item disable/enable
`lp:button-group:change`	Event fired on any change, detail = { value, source }
`lp:button-group:select`	Fired when an item becomes active, detail = { value }
`lp:button-group:deselect`	Fired when an item becomes inactive, detail = { value }