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