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

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

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯃꯃꯥꯡꯗꯥ ꯂꯦꯄꯊꯣꯀꯈ꯭ꯔꯕꯥ ꯕꯇꯟ ꯃꯑꯣꯡ ꯀꯌꯥ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ, ꯃꯈꯣꯌ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯄꯥꯟꯗꯝ ꯑꯗꯨ ꯐꯪꯍꯜꯂꯤ, ꯃꯁꯤꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯠꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯊꯥꯗꯣꯀꯄꯥ ꯑꯍꯦꯅꯕꯥ ꯈꯔꯥ ꯌꯥꯑꯣꯔꯤ꯫

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

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

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

ꯇꯦꯛꯁꯠ ꯔꯦꯄꯤꯡ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯣ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯇꯟ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯔꯦꯞ ꯇꯧꯕꯥ ꯄꯥꯃꯗ꯭ꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ .text-nowrapꯕꯇꯟ ꯑꯗꯨꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫ ꯁꯥꯁꯇꯥ, ꯅꯍꯥꯛꯅꯥ $btn-white-space: nowrapꯕꯇꯟ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯇꯦꯛꯁꯠ ꯔꯦꯄꯤꯡ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯕꯇꯟ ꯇꯦꯒꯁꯤꯡ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ .btnꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯅꯤ꯫ <button>ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯟ <a>ꯅꯠꯠꯔꯒꯥ <input>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ (ꯕ꯭ꯔꯥꯎꯖꯔ ꯈꯔꯅꯥ ꯈꯔꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯔꯦꯟꯗꯔ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ)꯫

ꯏꯟ-ꯄꯦꯖ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯕꯇꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ <a>(ꯀꯂꯥꯞꯄꯤꯡ ꯀꯟꯇꯦꯟꯇꯒꯨꯝꯕꯥ), ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯅꯧꯕꯥ ꯄꯦꯖꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯁꯦꯛꯁꯅꯁꯤꯡꯒꯥ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤꯅꯥ role="button"ꯃꯈꯣꯌꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯗꯨ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯒꯨꯝꯕꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯃꯇꯤꯛ ꯆꯥꯅꯥ ꯌꯧꯍꯟꯅꯕꯥ a ꯄꯤꯒꯗꯕꯅꯤ꯫ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯝꯔꯤ

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

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ꯑꯥꯎꯇꯂꯥꯏꯟ ꯕꯇꯅꯁꯤꯡ꯫

ꯕꯇꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯔꯤ, ꯑꯗꯨꯕꯨ ꯃꯈꯣꯌꯅꯥ ꯄꯨꯔꯀꯄꯥ ꯍꯦꯐꯇꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯁꯤꯡ ꯑꯗꯨꯗꯤ ꯅꯠꯇꯦ? .btn-outline-*ꯕꯇꯟ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯂꯩꯕꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯏꯃꯦꯖ ꯑꯃꯁꯨꯡ ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ ꯂꯧꯊꯣꯛꯅꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯗꯨꯒꯥ ꯃꯍꯨꯠ ꯁꯤꯜꯂꯨ꯫

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

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

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

ꯁꯥꯏꯖꯁꯤꯡ꯫

ꯐꯦꯟꯁꯤ ꯑꯆꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯄꯤꯀꯄꯥ ꯕꯇꯅꯁꯤꯡ? ꯑꯍꯦꯅꯕꯥ ꯁꯥꯏꯖꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ .btn-lgꯅꯠꯠꯔꯒꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.btn-sm

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

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

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

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

ꯅꯍꯥꯛꯅꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯁꯥꯏꯖꯤꯡ ꯐꯥꯑꯣꯕꯥ ꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯏ:

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

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯁ꯭ꯇꯦꯠ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ disabledꯑꯃꯍꯦꯛꯇꯗꯥ ꯕꯨꯂꯦꯟ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯎꯍꯅꯒꯗꯕꯅꯤ꯫ <button>ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡꯅꯥ pointer-events: noneꯑꯦꯞꯂꯥꯏ ꯇꯧꯈ꯭ꯔꯦ, ꯃꯁꯤꯅꯥ ꯍꯣꯚꯔ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯁ꯭ꯇꯦꯠꯁꯤꯡ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯊꯤꯡꯏ꯫

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

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡꯅꯥ <a>ꯈꯔꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯂꯃꯆꯠ ꯁꯥꯖꯠ ꯆꯠꯂꯤ:

<a>sꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ , ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯟꯅꯕꯥ disabledꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫.disabled
pointer-eventsꯑꯦꯉ꯭ꯀꯔ ꯕꯇꯅꯁꯤꯡꯗꯥ ꯄꯨꯝꯅꯃꯛ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯇꯨꯡꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡ ꯈꯔꯗꯤ ꯌꯥꯑꯣꯔꯤ꯫
ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯕꯇꯅꯁꯤꯡꯗꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯐꯤꯚꯝ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ <a>ꯌꯥꯎꯒꯗꯕꯅꯤ꯫aria-disabled="true"
ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ <a> ꯑꯗꯨ ꯌꯥꯎꯔꯣꯏꯗꯕꯅꯤ꯫href

ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫ ꯝꯔꯤ

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

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯀꯦꯚꯦꯠ ꯇꯧꯕꯥ꯫

hrefꯅꯍꯥꯛꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯗꯥ ꯊꯃꯒꯗꯕꯥ ꯀꯦꯁꯁꯤꯡ ꯀꯣꯚꯔ ꯇꯧꯅꯕꯥ , .disabledꯀ꯭ꯂꯥꯁ pointer-events: noneꯑꯗꯨꯅꯥ s.ꯒꯤ ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯗꯨ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯕꯗꯥ <a>ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤꯒꯤ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ HTMLꯒꯤꯗꯃꯛꯇꯥ ꯍꯧꯖꯤꯛ ꯐꯥꯎꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯥꯏꯖ ꯇꯧꯗ꯭ꯔꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ, ꯑꯗꯨꯕꯨ ꯃꯣꯗꯔꯟ ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯅꯥ ꯃꯁꯤꯕꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯁꯨ pointer-events: none, ꯀꯤꯕꯣꯔꯗ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯁꯤ ꯁꯣꯀꯍꯟꯗꯅꯥ ꯂꯩꯔꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯤꯠ ꯎꯗꯕꯥ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯑꯗꯨꯅꯥ ꯁꯦꯐ ꯑꯣꯏꯅꯕꯒꯤꯗꯃꯛ, ꯒꯤ ꯃꯊꯛꯇꯥ aria-disabled="true", ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯁꯨ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ tabindex="-1"ꯃꯗꯨꯅꯥ ꯃꯈꯣꯌꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯐꯣꯀꯁ ꯐꯪꯍꯟꯗꯅꯕꯥ, ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫ ꯝꯔꯤ

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

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ ꯕꯣꯇꯅꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯁꯞꯂꯦ ꯑꯃꯁꯨꯡ ꯒꯦꯞ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯃꯤꯛꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯕꯥ, “ꯕ꯭ꯂꯣꯛ ꯕꯇꯟ”ꯁꯤꯡꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯁ꯭ꯇꯦꯀꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫ ꯕꯇꯟ ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ, ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ, ꯑꯃꯁꯨꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕꯤꯍꯦꯕꯤꯌꯔꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯌꯥꯝꯅꯥ ꯍꯦꯟꯅꯥ ꯀꯟꯠꯔꯣꯜ ꯂꯩ꯫

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

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

mdꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯑꯃꯥ ꯁꯦꯝꯃꯤ, ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯐꯥꯑꯣꯕꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡꯗꯒꯤ ꯍꯧꯔꯒꯥ , ꯃꯐꯝ .d-md-blockꯑꯗꯨꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯍꯨꯠ ꯁꯤꯜꯂꯤ .d-grid, ꯃꯗꯨꯅꯥ gap-2ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯗꯨ ꯅ꯭ꯌꯨꯂꯤꯐꯥꯏ ꯇꯧꯏ꯫ ꯃꯈꯣꯌ ꯍꯣꯡꯂꯀꯄꯥ ꯎꯅꯕꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯁꯥꯏꯖ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫

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

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯂꯣꯛ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯍꯥꯐ-ꯋꯥꯏꯗ “ꯕ꯭ꯂꯣꯛ ꯕꯇꯟ” ꯑꯃꯒꯤꯗꯃꯛ, .col-6. ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯤꯌꯨ .mx-auto, ꯁꯨ꯫

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

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

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

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

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ꯕꯇꯟ ꯄ꯭ꯂꯒꯏꯟ ꯇꯧꯕꯥ꯫

ꯕꯇꯟ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯏꯆꯝ ꯆꯝꯕꯥ ꯑꯣꯟ/ꯑꯣꯐ ꯇꯣꯒꯜ ꯕꯇꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

ꯃꯤꯠꯌꯦꯡꯗꯥ, ꯍꯥꯌꯔꯤꯕꯥ ꯇꯣꯒꯜ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯆꯦꯀꯕꯣꯛꯁ ꯇꯣꯒꯜ ꯕꯇꯅꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯩ . ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯃꯈꯣꯌ ꯑꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯇꯣꯉꯥꯟꯅꯥ ꯌꯧꯍꯜꯂꯤ: ꯆꯦꯀꯕꯣꯛꯁ ꯇꯣꯒꯂꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ “ꯆꯦꯛ”/“ꯆꯦꯛ ꯇꯧꯗꯕꯥ” ꯍꯥꯌꯅꯥ ꯂꯥꯎꯊꯣꯛꯀꯅꯤ (ꯃꯔꯃꯗꯤ, ꯃꯈꯣꯌꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯑꯗꯨ ꯑꯣꯏꯔꯕꯁꯨ, ꯃꯈꯣꯌ ꯑꯁꯤ ꯐꯟꯗꯥꯃꯦꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡꯅꯤ), ꯑꯗꯨꯒꯥ ꯇꯣꯒꯜ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤꯗꯤ... “ꯕꯇꯟ”/“ꯕꯇꯟ ꯊꯥꯕꯥ”꯫ ꯑꯦꯞꯔꯣꯆ ꯑꯅꯤ ꯑꯁꯤꯒꯤ ꯃꯔꯛꯇꯥ ꯈꯅꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯁꯦꯃꯒꯠꯂꯤꯕꯥ ꯇꯣꯒꯂꯒꯤ ꯃꯈꯜ ꯑꯗꯨꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯇꯣꯒꯜ ꯑꯗꯨ ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯇꯁꯦꯡꯕꯥ ꯕꯇꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯂꯩꯒꯅꯤ ꯅꯠꯠꯔꯒꯥ ꯇꯧꯔꯣꯏꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫

ꯔꯥꯖ꯭ꯌꯁꯤꯡ ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

data-bs-toggle="button"ꯕꯇꯟ ꯑꯃꯒꯤ activeꯁ꯭ꯇꯦꯠ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯇꯟ ꯑꯃꯥ ꯄ꯭ꯔꯤ-ꯇꯣꯒꯜ ꯇꯧꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ .activeꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯀꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ aria-pressed="true" ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯃꯇꯤꯛ ꯆꯥꯅꯥ ꯌꯧꯍꯅꯕꯥ ꯉꯝꯅꯕꯥ꯫

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

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫ ꯑꯦꯛꯇꯤꯕ ꯇꯣꯒꯜ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯇꯣꯒꯜ ꯂꯤꯉ꯭ꯛ꯫

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

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯕꯇꯟ ꯀꯟꯁꯠꯔꯛꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯇꯟ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ:

const bsButton = new bootstrap.Button('#myButton')

ꯊꯧꯑꯪꯡ	ꯋꯥꯔꯣꯜ
`dispose`	ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯕꯇꯟ ꯑꯃꯥ ꯃꯥꯡꯍꯜꯂꯤ꯫ (ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥ ꯊꯝꯂꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)
`getInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯕꯇꯟ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯕꯇꯟ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫ ꯃꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	ꯄꯨꯁ ꯁ꯭ꯇꯦꯠ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯕꯇꯟ ꯑꯗꯨꯗꯥ ꯃꯁꯤ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯄꯤꯔꯤ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯕꯇꯟ ꯄꯨꯝꯅꯃꯛ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ꯫

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

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

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

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ , , ꯑꯃꯁꯨꯡ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯥ .btn-*ꯂꯣꯌꯅꯅꯥ ꯑꯍꯦꯅꯕꯥ CSS ꯔꯨꯂꯁꯤꯡ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯦꯝꯕꯥ ꯑꯣꯏꯍꯟꯅꯕꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯄꯗꯦꯠ ꯇꯧꯏ꯫button-variant()button-outline-variant()button-size()

.btn-*ꯑꯩꯈꯣꯌꯒꯤ ꯏꯁꯥꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯑꯃꯁꯨꯡ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯃꯤꯛꯁꯆꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

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

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ꯫

ꯕꯇꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯤꯛꯁꯤꯟ ꯑꯍꯨꯝ ꯂꯩ: ꯕꯇꯟ ꯑꯃꯁꯨꯡ ꯕꯇꯟ ꯑꯥꯎꯇꯂꯥꯏꯟ ꯚꯦꯔꯤꯑꯦꯟꯇ ꯃꯤꯛꯁꯤꯟ (ꯑꯅꯤꯃꯛ ꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ $theme-colors), ꯄ꯭ꯂꯥꯁ ꯕꯇꯟ ꯁꯥꯏꯖ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯥ꯫

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

ꯁꯥꯁ ꯂꯨꯄꯁꯤꯡ꯫

ꯕꯇꯟ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡ (ꯔꯦꯒꯨꯂꯥꯔ ꯑꯃꯁꯨꯡ ꯑꯥꯎꯠꯂꯥꯏꯟ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯥ)ꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ $theme-colorsꯃꯦꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}