ꯕꯦꯖꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯕꯦꯖꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯗꯣꯀꯨꯃꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ, ꯑꯩꯈꯣꯌꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯀꯥꯎꯟꯇ ꯑꯃꯁꯨꯡ ꯂꯦꯕꯦꯂꯤꯡ ꯀꯝꯄꯣꯅꯦꯟꯇ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

emꯕꯦꯖꯁꯤꯡꯅꯥ ꯔꯤꯂꯦꯇꯤꯚ ꯐꯣꯟꯇ ꯁꯥꯏꯖ ꯑꯃꯁꯨꯡ ꯌꯨꯅꯤꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯁꯥꯏꯖ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯏ꯫ v5 ꯗꯒꯤ ꯍꯧꯅꯥ, ꯕꯦꯖꯁꯤꯡꯗꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯐꯣꯀꯁ ꯅꯠꯔꯒꯥ ꯍꯣꯚꯔ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯂꯩꯔꯔꯣꯏ꯫

ꯍꯦꯗꯤꯡꯁꯤꯡ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ꯑꯅꯧꯕ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

ꯕꯇꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯕꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯀꯥꯎꯟꯇꯔ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

ꯃꯈꯣꯌ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯕꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯋꯥꯈꯜ ꯋꯥꯕꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫ ꯕꯦꯖꯁꯤꯡꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯗꯨꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯀ꯭ꯌꯨ ꯑꯃꯥ ꯄꯤꯔꯕꯁꯨ, ꯌꯨꯖꯔꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯕꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯑꯗꯨ ꯁꯨꯞꯅꯇꯒꯤ ꯄꯤꯒꯅꯤ꯫ ꯑꯀꯛꯅꯕꯥ ꯐꯤꯚꯝ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯕꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯋꯥꯍꯩ, ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯟ ꯑꯃꯒꯤ ꯑꯔꯣꯏꯕꯗꯥ ꯔꯦꯟꯗꯝ ꯑꯣꯏꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯋꯥꯍꯩ ꯅꯠꯠꯔꯒꯥ ꯅꯝꯕꯔꯁꯤꯡꯒꯨꯝꯅꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫

ꯀꯟꯇꯦꯛꯁ ꯑꯗꯨ ꯃꯌꯦꯛ ꯁꯦꯡꯗ꯭ꯔꯕꯗꯤ (“ꯅꯣꯇꯤꯐꯤꯀꯦꯁꯅꯁꯤꯡ”ꯒꯤ ꯈꯨꯗꯝ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯃꯐꯃꯗꯨꯗꯥ “4” ꯑꯁꯤ ꯅꯣꯇꯤꯐꯤꯀꯦꯁꯅꯁꯤꯡꯒꯤ ꯃꯁꯤꯡꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ), ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯛꯁ ꯑꯃꯥ ꯌꯥꯎꯍꯟꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ꯫

ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ꯫

ꯑꯦ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ .badgeꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯟ ꯑꯃꯒꯤ ꯀꯣꯟꯅꯥ ꯊꯝꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badgeꯍꯦꯟꯅꯥ ꯖꯦꯅꯦꯔꯦꯜ ꯑꯣꯏꯕꯥ ꯏꯟꯗꯤꯀꯦꯇꯔ ꯑꯃꯒꯤꯗꯃꯛ ꯀꯥꯎꯟꯇ ꯇꯧꯗꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯑꯍꯦꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯈꯔꯒꯥ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯁꯨ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯁꯤꯡ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯃꯇꯦꯡ ꯄꯥꯡꯕꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ background-colorꯀꯟꯠꯔꯁ꯭ꯇꯤꯡ ꯐꯣꯔꯒ꯭ꯔꯥꯎꯟꯗ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯕꯤꯌꯨ . ꯃꯃꯥꯡꯗꯥ ꯃꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯈꯅꯒꯗꯕꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯝꯃꯤ, ꯃꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫color.text-bg-{color}.text-{color}.bg-{color}

ꯃꯔꯨ ꯑꯣꯏꯕ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯑꯣꯏꯕꯥ꯫ ꯃꯥꯏ ꯄꯥꯛꯄ ꯈꯨꯗꯣꯡꯊꯤꯕ ꯆꯦꯛꯁꯤꯟꯋꯥ ꯏꯅꯐꯣ ꯃꯉꯥꯜ ꯑꯃꯝꯕ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ .visually-hiddenꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨꯗꯒꯤ) ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯐꯪꯏ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ, ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ꯫

ꯄꯤꯜ ꯕꯦꯖꯁꯤꯡ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ .rounded-pillꯕꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯍꯦꯟꯅꯥ ꯆꯥꯎꯕꯥ border-radius.

ꯃꯔꯨ ꯑꯣꯏꯕ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯑꯣꯏꯕꯥ꯫ ꯃꯥꯏ ꯄꯥꯛꯄ ꯈꯨꯗꯣꯡꯊꯤꯕ ꯆꯦꯛꯁꯤꯟꯋꯥ ꯏꯅꯐꯣ ꯃꯉꯥꯜ ꯑꯃꯝꯕ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯑꯦꯞꯔꯣꯆꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯕꯦꯖꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .badge. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;