buttons

default button

<button class="btn">default</button>

main theme

<button class="btn primary">primary</button>
<button class="btn secondary">secondary</button>
<button class="btn success">success</button>
<button class="btn info">info</button>
<button class="btn orange">orange</button>
<button class="btn error">error</button>
<button class="btn gray">gray</button>
<button class="btn black">black</button>
<button class="btn white">white</button>

outlined theme

<button class="btn outlined primary">primary</button>
<button class="btn outlined secondary">secondary</button>
<button class="btn outlined success">success</button>
<button class="btn outlined info">info</button>
<button class="btn outlined orange">orange</button>
<button class="btn outlined error">error</button>
<button class="btn outlined gray">gray</button>
<button class="btn outlined black">black</button>
<button class="btn outlined white">white</button>

flat theme

<button class="btn primary-flat">primary</button>
<button class="btn secondary-flat">secondary</button>
<button class="btn success-flat">success</button>
<button class="btn info-flat">info</button>
<button class="btn orange-flat">orange</button>
<button class="btn error-flat">error</button>
<button class="btn gray-flat">gray</button>
<button class="btn black-flat">black</button>
<button class="btn white-flat">white</button>

usage

section import

@use "~"as * with (
  $base-components: true
);

Individual Import

@use "~"as * with (
  $components: (
    base: (
      button: ture,
    ),
  )
);

mixin

@use "~"as * with (
  $a-var: ""
);

@include buttonBase();