Button group

A button group is like a digital gang of buttons, working together to get the job done. It's a handy component that groups related buttons, making it easier for users to navigate and interact with a website. With a button group, users can quickly find and use the buttons they need, without feeling overwhelmed by a sea of options.

Basic example

Wrap a series of buttons with .btn in .btn-group.

HTML
SCSS

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

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;

@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$button: functions.get-theme(app.$theme, 'components.button');

@include mixins.generate-component(
    $button,
    "btn",
    app.$config,
    app.$theme
);

$button_group: functions.get-theme(app.$theme, 'components.button-group');

@include mixins.generate-component(
    $button_group,
    "btn-group",
    app.$config,
    app.$theme
);

Separated example

Wrap a series of buttons with .btn in .btn-group.

HTML
SCSS

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

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;

@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$button: functions.get-theme(app.$theme, 'components.button');

@include mixins.generate-component(
    $button,
    "btn",
    app.$config,
    app.$theme
);

$button_group: functions.get-theme(app.$theme, 'components.button-group');

@include mixins.generate-component(
    $button_group,
    "btn-group",
    app.$config,
    app.$theme
);