badge

default theme

default
<span class="badge">default</span>

main theme

primarysecondarysuccessinfoorangeerrorgrayblackwhite
<span class="badge primary">primary</span>
<span class="badge secondary">secondary</span>
<span class="badge success">success</span>
<span class="badge info">info</span>
<span class="badge orange">orange</span>
<span class="badge error">error</span>
<span class="badge gray">gray</span>
<span class="badge black">black</span>
<span class="badge white">white</span>

outlined theme

primarysecondarysuccessinfoorangeerrorgrayblackwhite

flat theme

primarysecondarysuccessinfoorangeerrorgrayblackwhite

usage

section import

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

Individual Import

@use "~" as * with (
  $components: (
    other: (
      badge: ture,
    ),
  )
);

mixin

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

@include badge();