دوگمەکان

شێوازەکانی دوگمەی تایبەتمەندی Bootstrap بەکاربهێنە بۆ کردارەکان لە فۆڕمەکان، دیالۆگەکان و زۆر شتی تر لەگەڵ پشتگیری بۆ چەندین قەبارە، دۆخ و زۆر شتی تر.

لەم پەیجەدا

نموونە

بووتستراپ چەندین شێوازی دوگمەی پێشوەختە دیاریکراو لەخۆدەگرێت، هەریەکەیان خزمەت بە مەبەستی ماناداری خۆی دەکات، لەگەڵ چەند شتێکی زیادە کە فڕێدراوە بۆ کۆنترۆڵکردنی زیاتر.

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پۆلەکە زیاد بکەیت بۆ دوگمەکە. لە Sass دەتوانیت ڕێکبخەیت $btn-white-space: nowrapبۆ لەکارخستنی پێچانی دەق بۆ هەر دوگمەیەک.

تاگەکانی دوگمە

پۆلەکان .btnبە شێوەیەک داڕێژراون کە لەگەڵ <button>توخمەکەدا بەکاربهێنرێن. بەڵام دەتوانیت ئەم پۆلانە لەسەر <a>یان <input>توخمەکانیش بەکاربهێنیت (هەرچەندە ڕەنگە هەندێک لە وێبگەڕەکان ڕەندەرێکی کەمێک جیاواز بەکاربهێنن).

لە کاتی بەکارهێنانی پۆلەکانی دوگمە لەسەر <a>ئەو توخمانەی کە بەکاردەهێنرێن بۆ دەستپێکردنی کارایی ناو لاپەڕە (وەک داڕمانی ناوەڕۆک)، لەبری بەستنەوە بە لاپەڕە یان بەشە نوێیەکان لەناو لاپەڕەی ئێستادا، ئەم بەستەرانە پێویستە a بدرێت role="button"بۆ ئەوەی بە شێوەیەکی گونجاو ئامانجەکەیان بگەیەننە تەکنەلۆژیا یارمەتیدەرەکانی وەک خوێنەری شاشە.

لینک

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بۆ هەوڵدان بۆ لەکارخستنی کارایی بەستەرەکەی <a>s. تێبینی بکە کە ئەم تایبەتمەندییە 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>

دوگمەکانی بلۆک بکە

دروستکردنی ستێکی وەڵامدەرەوەی تەواو پانایی، "دوگمەی بلۆک" وەک ئەوانەی لە Bootstrap 4 دا هەن بە تێکەڵەیەک لە سوودمەندییەکانی نمایش و بۆشاییمان. بە بەکارهێنانی سوودمەندییەکان لەبری پۆلە تایبەتەکانی دوگمە، ئێمە کۆنترۆڵی زۆر زیاترمان هەیە لەسەر دووری، ڕێکخستن و هەڵسوکەوتی وەڵامدەرەوە.

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`	دوگمەی توخمێک لەناو دەبات. (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات)
`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()
})

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندوو لە Bootstrap، ئێستا دوگمەکان گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن لەسەر .btnبۆ باشترکردنی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

  --#{$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-*پۆلێکی دەستکاریکەری تایبەتمەند وەک ئەوەی ئێمە بۆ دوگمەکانی تایبەت بە دۆکیومێنتەکانمان دەیکەین بە دووبارە تەرخانکردنی گۆڕاوەکانی CSS ی Bootstrap بە تێکەڵەیەک لە گۆڕاوەکانی CSS و Sass ی خۆمان.

.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);
  }
}