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