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.

  • Buttons 1
<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 link">Link</button>
<button type="button" class="btn blank">Blank</button>
@use '~/styles/app.scss' as app;

@include app.generate-component(
    app.get-theme(app.$theme, 'components.button'),
    'btn',
    app.$config,
    app.$theme
);

Variations

  • Button 2
<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 '~/styles/app.scss' as app;

@include app.generate-component(
  app.get-theme(app.$theme, 'components.button'),
  'btn',
  app.$config,
  app.$theme
);

Types

  • Button 3
<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 '~/styles/app.scss' as app;

@include app.generate-component(
  app.get-theme(app.$theme, 'components.button'),
  'btn',
  app.$config,
  app.$theme
);