Buttons

A button is like a digital doorbell, inviting users to take action with a single click. It's the trusty sidekick of web pages, helping users navigate, submit forms, and perform actions with ease. With a well-designed button, users can easily find their way around a website, without feeling like they're wandering through a digital maze.

Examples

SCSSLeon includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<button type="button" class="btn">Default</button>
<button type="button" class="btn loading">Loading</button>
<button type="button" class="btn" disabled>Disabled</button>
<button type="button" class="btn btn-link">Link</button>

@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
);

Variations

<button type="button" class="btn" style="--xii-button-background: red">Default</button>
<button type="button" class="btn" style="--xii-button-background: green">Default</button>
<button type="button" class="btn" style="--xii-button-background: blue">Default</button>
<button type="button" class="btn" style="--xii-button-background: silver">Default</button>

@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
);

Types

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input"/>
<input class="btn" type="submit" value="Submit"/>
<input class="btn" type="reset" value="Reset"/>

@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
);