دکمه‌ها (Buttons)

دکمه‌های پایه

<Card>
  <CardHeader>
    <h5>دکمه‌های پایه</h5>
  </CardHeader>
  <CardBody>
    <Button color="primary">Primary</Button>
    <Button color="secondary">Secondary</Button>
    <Button color="success">Success</Button>
    <Button color="warning">Warning</Button>
    <Button color="danger">Danger</Button>
    <Button color="info">Info</Button>
    <Button color="light">Light</Button>
    <Button color="dark">Dark</Button>
    <Button color="link">Link</Button>
  </CardBody>
</Card>

دکمه‌های حاشیه‌دار

<Card>
  <CardHeader>
    <h5>دکمه‌های حاشیه‌دار</h5>
  </CardHeader>
  <CardBody>
    <Button color="primary" outline>Primary</Button>
    <Button color="secondary" outline>Secondary</Button>
    <Button color="success" outline>Success</Button>
    <Button color="warning" outline>Warning</Button>
    <Button color="danger" outline>Danger</Button>
    <Button color="info" outline>Info</Button>
    <Button color="light" outline>Light</Button>
    <Button color="dark" outline>Dark</Button>
  </CardBody>
</Card>

دکمه‌های روشن

<Card>
  <CardHeader>
    <h5>دکمه‌های روشن</h5>
  </CardHeader>
  <CardBody>
    <Button color="light-primary" type="button">اصلی</Button>
    <Button color="light-secondary" type="button">ثانویه</Button>
    <Button color="light-success" type="button">موفق</Button>
    <Button color="light-danger" type="button">خطر</Button>
    <Button color="light-warning" type="button">هشدار</Button>
    <Button color="light-info" type="button">اطلاعات</Button>
    <Button color="light-light" type="button">روشن</Button>
    <Button color="light-dark" type="button">تیره</Button>
    <Button color="light-link" type="button">لینک</Button>
  </CardBody>
</Card>

گروه دکمه‌ها

لینک فعال لینک لینک

<div className="row">
  <div className="col-md-6 col-lg-4 col-12">
    <div className="btn-group">
      <a href="#" className="btn btn-primary active" aria-current="page">لینک فعال</a>
      <a href="#" className="btn btn-primary " aria-current="">لینک</a>
      <a href="#" className="btn btn-primary " aria-current="">لینک</a>
    </div>
  </div>
  <div className="col-md-6 col-lg-4 col-12">
    <div className="btn-group">
      <a href="#" className="btn btn-outline-secondary " aria-current="">لینک فعال</a>
      <a href="#" className="btn btn-outline-secondary " aria-current="">لینک</a>
      <a href="#" className="btn btn-outline-secondary " aria-current="">لینک</a>
    </div>
  </div>
  <div className="col-md-6 col-lg-4 col-12">
    <div className="btn-group">
      <a href="#" className="btn btn-light-success " aria-current="">لینک فعال</a>
      <a href="#" className="btn btn-light-success " aria-current="">لینک</a>
      <a href="#" className="btn btn-light-success " aria-current="">لینک</a>
    </div>
  </div>
</div>

اندازه‌ها

<div className="row">
  <div className="col-lg-4 col-12 mb-3">
    <div className="btn-group btn-group-lg" role="group" aria-label="گروه دکمه بزرگ">
      <Button type="Button" className="btn btn-outline-primary">چپ</Button>
      <Button type="Button" className="btn btn-outline-primary">وسط</Button>
      <Button type="Button" className="btn btn-outline-primary">راست</Button>
    </div>
  </div>
  <div className="col-lg-4 col-12 mb-3">
    <div className="btn-group btn-group" role="group" aria-label="گروه دکمه پیش‌فرض">
      <Button type="Button" className="btn btn-outline-secondary">چپ</Button>
      <Button type="Button" className="btn btn-outline-secondary">وسط</Button>
      <Button type="Button" className="btn btn-outline-secondary">راست</Button>
    </div>
  </div>
  <div className="col-lg-4 col-12 mb-3">
    <div className="btn-group btn-group-sm" role="group" aria-label="گروه دکمه کوچک">
      <Button type="Button" className="btn btn-outline-success">چپ</Button>
      <Button type="Button" className="btn btn-outline-success">وسط</Button>
      <Button type="Button" className="btn btn-outline-success">راست</Button>
    </div>
  </div>
</div>

دکمه‌های آیکون‌دار

<div class="row app-btn-list">
  <div class="col-md-6 col-lg-4">
    <Button type="button" className="btn btn-primary">
      <IconDownload size={18} className="me-2" /> اصلی
    </Button>
    <Button type="button" className="btn btn-secondary d-lg-inline-flex align-items-center">
      ثانویه <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
  <div class="col-md-6 col-lg-4">
    <Button type="button" className="btn btn-outline-primary">
      <IconDownload size={18} className="me-2" /> اصلی
    </Button>
    <Button type="button" className="btn btn-outline-secondary d-lg-inline-flex align-items-center">
      ثانویه <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
  <div class="col-md-6 col-lg-4">
    <Button type="button" className="btn btn-light-primary">
      <IconDownload size={18} className="me-2" /> اصلی
    </Button>
    <Button type="button" className="btn btn-light-secondary d-lg-inline-flex align-items-center">
      ثانویه <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
</div>

رادیوباتن

<div class="row app-btn-list">
  <div class="col-md-6 col-lg-4">
    <Button type="button" class="btn btn-primary rounded-pill">
        <IconDownload size={18} className="me-2" /> اصلی
    </Button>
    <Button type="button" class="btn btn-secondary rounded-pill d-lg-inline-flex align-items-center">
      ثانویه <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
  <div class="col-md-6 col-lg-4">
    <Button type="button" class="btn btn-outline-primary">
        <IconDownload size={18} className="me-2" /> اصلی
    </Button>
    <Button type="button" class="btn btn-outline-secondary rounded-pill d-lg-inline-flex align-items-center">
      ثانویه <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
  <div class="col-md-6 col-lg-4">
    <Button type="button" class="btn btn-light-primary">
        <IconDownload size={18} className="me-2" /> اصلی
    </Button>
    <Button type="button" class="btn btn-light-secondary rounded-pill d-lg-inline-flex align-items-center">
      ثانویه <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
</div>

انواع دکمه های سوشال

<div class="row">
  <div class="col-md-6 col-lg-4 col-12">
    <button type="button" class="btn btn-facebook b-r-22 text-white d-inline-flex-center">
      <IconBrandFacebook size={18} className="me-1" /> فیس بوک
    </button>
    <button type="button" class="btn btn-twitter b-r-22 text-white d-inline-flex-center">
      <IconBrandTwitter size={18} className="me-1" /> توییتر
    </button>
  </div>
  <div class="col-md-6 col-lg-4 col-12">
    <button type="button" class="btn btn-outline-pinterest b-r-22 d-inline-flex-center">
      <IconBrandPinterest size={18} className="me-1" /> پینترست
    </button>
    <button type="button" class="btn btn-outline-linkedin b-r-22 d-inline-flex-center">
      <IconBrandLinkedin size={18} className="me-1" /> لینکدین
    </button>
  </div>
  <div class="col-md-6 col-lg-4 col-12">
    <button type="button" class="btn btn-light-reddit b-r-22 d-inline-flex-center">
      <IconBrandReddit size={18} className="me-1" /> ردیت
    </button>
    <button type="button" class="btn btn-light-twitter b-r-22 d-inline-flex-center">
      <IconBrandTwitter size={18} className="me-1" /> توییتر
    </button>
  </div>
</div>

دکمه های آیکن

<div className="app-btn-list">
  <Button type="button" className="btn btn-primary icon-btn b-r-4">
    <IconCapture size={18} />
  </Button>
  <Button type="button" className="btn btn-secondary icon-btn b-r-4">
    <IconBellRinging size={18} />
  </Button>
  <Button type="button" className="btn btn-outline-primary icon-btn b-r-4">
    <IconCapture size={18} />
  </Button>
  <Button type="button" className="btn btn-outline-secondary icon-btn b-r-4">
    <IconBellRinging size={18} />
  </Button>
  <Button type="button" className="btn btn-light-primary icon-btn b-r-4">
    <IconCapture size={18} />
  </Button>
  <Button type="button" className="btn btn-light-secondary icon-btn b-r-4">
    <IconBellRinging size={18} />
  </Button>
</div>

دکمه های سوشال

<div className="app-btn-list">
  <Button type="button" className="btn btn-facebook icon-btn b-r-22">
    <IconBrandFacebook size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-twitter icon-btn b-r-22">
    <IconBrandTwitter size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-pinterest icon-btn b-r-22">
    <IconBrandPinterest size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-linkedin icon-btn b-r-22">
    <IconBrandLinkedin size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-reddit icon-btn b-r-22">
    <IconBrandReddit size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-whatsapp icon-btn b-r-22">
    <IconBrandWhatsapp size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-gmail icon-btn b-r-22">
    <IconBrandGmail size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-telegram icon-btn b-r-22">
    <IconBrandTelegram size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-youtube icon-btn b-r-22">
    <IconBrandYoutube size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-vimeo icon-btn b-r-22">
    <IconBrandVimeo size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-behance icon-btn b-r-22">
    <IconBrandBehance size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-github icon-btn b-r-22">
    <IconBrandGithub size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-skype icon-btn b-r-22">
    <IconBrandSkype size={18} className="text-white" />
  </Button>
  <Button type="button" className="btn btn-snapchat icon-btn b-r-22">
    <IconBrandSnapchat size={18} className="text-white" />
  </Button>
</div>

دکمه‌های غیرفعال

دکمه‌های فعال


<div class="row">
    <div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
        <button type="button" class="btn btn-primary active">
            <i class="ti ti-download"></i> اصلی
        </button>
        <button type="button" class="btn btn-secondary d-lg-inline-flex align-items-center active">
            ثانویه <i class="ti ti-alert-triangle m-s-3"></i>
        </button>
    </div>
    <div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
        <button type="button" class="btn btn-outline-primary active">
            <i class="ti ti-download"></i> اصلی
        </button>
        <button type="button" class="btn btn-outline-secondary d-lg-inline-flex align-items-center active">
            ثانویه <i class="ti ti-alert-triangle m-s-3"></i>
        </button>
    </div>
    <div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
        <button type="button" class="btn btn-light-primary active">
            <i class="ti ti-download"></i> اصلی
        </button>
        <button type="button" class="btn btn-light-secondary d-lg-inline-flex align-items-center active">
            ثانویه <i class="ti ti-alert-triangle m-s-3"></i>
        </button>
    </div>
</div>

دکمه های لودینگ


<div class="row">
    <div class="col-lg-6 col-12">
        <button class="btn btn-primary d-inline-flex-center" type="button">
            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
            درحال بارگذاری...
        </button>
        <button class="btn btn-secondary d-inline-flex-center" type="button">
            کمی صبرکنید... <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
        </button>
        <button class="btn btn-success icon-btn" type="button">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">درحال بارگذاری...</span>
        </button>
        <button class="btn btn-danger icon-btn" type="button">
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">درحال بارگذاری...</span>
        </button>
    </div>
    <div class="col-lg-6 col-12 mb-3">
        <button class="btn btn-outline-primary d-inline-flex-center" type="button">
            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
            درحال بارگذاری...
        </button>
        <button class="btn btn-outline-secondary d-inline-flex-center" type="button">
            کمی صبرکنید... <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
        </button>
        <button class="btn btn-outline-success icon-btn" type="button">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">درحال بارگذاری...</span>
        </button>
        <button class="btn btn-outline-danger icon-btn" type="button">
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">درحال بارگذاری...</span>
        </button>
    </div>
    <div class="col-lg-6 col-12 mb-3">
        <button class="btn btn-light-primary d-inline-flex-center" type="button">
            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
            درحال بارگذاری...
        </button>
        <button class="btn btn-light-secondary d-inline-flex-center" type="button">
            کمی صبرکنید... <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
        </button>
        <button class="btn btn-light-success icon-btn" type="button">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">درحال بارگذاری...</span>
        </button>
        <button class="btn btn-light-danger icon-btn" type="button">
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">درحال بارگذاری...</span>
        </button>
    </div>
</div>

دکمه‌های تمام‌عرض


<div class="row">
    
    <div class="col-md-6 col-lg-4 col-12">
        <div class="d-grid gap-2">
            <button class="btn btn-primary w-100" type="button">دکمه</button>
<button class="btn btn-secondary w-100" type="button">دکمه</button>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 col-12">
        <div class="d-grid gap-2">
            <button class="btn btn-outline-primary w-100" type="button">دکمه</button>
<button class="btn btn-outline-secondary w-100" type="button">دکمه</button>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 col-12">
        <div class="d-grid gap-2">
            <button class="btn btn-light-primary w-100" type="button">دکمه</button>
<button class="btn btn-light-secondary w-100" type="button">دکمه</button>
        </div>
    </div>
</div>

دکمه ها با سایزهای مختلف


<div class="app-btn-list">
  
    <button type="button" class="btn btn-primary btn-xxl">
      [object Object] اصلی
    </button>
  

    <button type="button" class="btn btn-primary btn-xl">
      [object Object] اصلی
    </button>
  

    <button type="button" class="btn btn-secondary btn-lg">
      [object Object] ثانویه
    </button>
  

    <button type="button" class="btn btn-success ">
      [object Object] موفقیت آمیز
    </button>
  

    <button type="button" class="btn btn-danger btn-sm">
      [object Object] هشدار دهنده
    </button>
  

    <button type="button" class="btn btn-warning btn-xs">
      [object Object] هشدار دهنده
    </button>
  
</div>

انواع دکمه های Radius


<div class="app-btn-list">
  
    <button type="button" class="btn btn-primary b-r-0">اصلی</button>
  

    <button type="button" class="btn btn-secondary b-r-6">فرعی</button>
  

    <button type="button" class="btn btn-success b-r-10">موفق</button>
  

    <button type="button" class="btn btn-danger b-r-22">خطر</button>
  
</div>

تو در تو


<div class="row">
    <div class="col-md-6 col-lg-4 col-12">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-secondary">1</button>
            <button type="button" class="btn btn-secondary">2</button>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-secondary dropdown-toggle" aria-expanded="false">
                    Dropdown
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 col-12">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-outline-secondary">1</button>
            <button type="button" class="btn btn-outline-secondary">2</button>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false">
                    Dropdown
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 col-12">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-light-secondary">1</button>
            <button type="button" class="btn btn-light-secondary">2</button>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-light-secondary dropdown-toggle" aria-expanded="false">
                    Dropdown
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

دکمه های عمودی

رادیوباتن 1رادیوباتن 2رادیوباتن 3


<div class="row">
    
    <div class="col-lg-4 col-12 mb-3">
        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
            
            <button type="button" class="btn btn-secondary">نمونه دکمه</button>
            <button type="button" class="btn btn-secondary">نمونه دکمه</button>
            <button type="button" class="btn btn-secondary">نمونه دکمه</button>
        </div>
    </div>
    <div class="col-lg-4 col-12 mb-3">
        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
            
            <button type="button" class="btn btn-outline-secondary">نمونه دکمه</button>
            <button type="button" class="btn btn-outline-secondary">نمونه دکمه</button>
            <button type="button" class="btn btn-outline-secondary">نمونه دکمه</button>
        </div>
    </div>
    <div class="col-lg-4 col-12 mb-3">
        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
            
            <button type="button" class="btn btn-light-secondary">نمونه دکمه</button>
            <button type="button" class="btn btn-light-secondary">نمونه دکمه</button>
            <button type="button" class="btn btn-light-secondary">نمونه دکمه</button>
        </div>
    </div>
    <div class="col-lg-4 col-12 mb-3">
        <div class="btn-group-vertical ms-2" role="group" aria-label="Vertical radio toggle button group">
            
            <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1">
            <label class="btn btn-outline-secondary" for="vbtn-radio1">رادیوباتن 1</label>
            <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2">
            <label class="btn btn-outline-secondary" for="vbtn-radio2">رادیوباتن 2</label>
            <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3">
            <label class="btn btn-outline-secondary" for="vbtn-radio3">رادیوباتن 3</label>
        </div>
    </div>
</div>

<Card> <CardHeader> <h5>دکمه‌های پایه</h5> </CardHeader> <CardBody> <Button color="primary">Primary</Button> <Button color="secondary">Secondary</Button> <Button color="success">Success</Button> <Button color="warning">Warning</Button> <Button color="danger">Danger</Button> <Button color="info">Info</Button> <Button color="light">Light</Button> <Button color="dark">Dark</Button> <Button color="link">Link</Button> </CardBody> </Card>

<Card> <CardHeader> <h5>دکمه‌های حاشیه‌دار</h5> </CardHeader> <CardBody> <Button color="primary" outline>Primary</Button> <Button color="secondary" outline>Secondary</Button> <Button color="success" outline>Success</Button> <Button color="warning" outline>Warning</Button> <Button color="danger" outline>Danger</Button> <Button color="info" outline>Info</Button> <Button color="light" outline>Light</Button> <Button color="dark" outline>Dark</Button> </CardBody> </Card>

<Card> <CardHeader> <h5>دکمه‌های روشن</h5> </CardHeader> <CardBody> <Button color="light-primary" type="button">اصلی</Button> <Button color="light-secondary" type="button">ثانویه</Button> <Button color="light-success" type="button">موفق</Button> <Button color="light-danger" type="button">خطر</Button> <Button color="light-warning" type="button">هشدار</Button> <Button color="light-info" type="button">اطلاعات</Button> <Button color="light-light" type="button">روشن</Button> <Button color="light-dark" type="button">تیره</Button> <Button color="light-link" type="button">لینک</Button> </CardBody> </Card>

<div class="row app-btn-list"> <div class="col-md-6 col-lg-4"> <Button type="button" className="btn btn-primary"> <IconDownload size={18} className="me-2" /> اصلی </Button> <Button type="button" className="btn btn-secondary d-lg-inline-flex align-items-center"> ثانویه <IconAlertTriangle size={18} className="ms-2" /> </Button> </div> <div class="col-md-6 col-lg-4"> <Button type="button" className="btn btn-outline-primary"> <IconDownload size={18} className="me-2" /> اصلی </Button> <Button type="button" className="btn btn-outline-secondary d-lg-inline-flex align-items-center"> ثانویه <IconAlertTriangle size={18} className="ms-2" /> </Button> </div> <div class="col-md-6 col-lg-4"> <Button type="button" className="btn btn-light-primary"> <IconDownload size={18} className="me-2" /> اصلی </Button> <Button type="button" className="btn btn-light-secondary d-lg-inline-flex align-items-center"> ثانویه <IconAlertTriangle size={18} className="ms-2" /> </Button> </div> </div>

<div class="row app-btn-list"> <div class="col-md-6 col-lg-4"> <Button type="button" class="btn btn-primary rounded-pill"> <IconDownload size={18} className="me-2" /> اصلی </Button> <Button type="button" class="btn btn-secondary rounded-pill d-lg-inline-flex align-items-center"> ثانویه <IconAlertTriangle size={18} className="ms-2" /> </Button> </div> <div class="col-md-6 col-lg-4"> <Button type="button" class="btn btn-outline-primary"> <IconDownload size={18} className="me-2" /> اصلی </Button> <Button type="button" class="btn btn-outline-secondary rounded-pill d-lg-inline-flex align-items-center"> ثانویه <IconAlertTriangle size={18} className="ms-2" /> </Button> </div> <div class="col-md-6 col-lg-4"> <Button type="button" class="btn btn-light-primary"> <IconDownload size={18} className="me-2" /> اصلی </Button> <Button type="button" class="btn btn-light-secondary rounded-pill d-lg-inline-flex align-items-center"> ثانویه <IconAlertTriangle size={18} className="ms-2" /> </Button> </div> </div>

<div class="row"> <div class="col-md-6 col-lg-4 col-12"> <button type="button" class="btn btn-facebook b-r-22 text-white d-inline-flex-center"> <IconBrandFacebook size={18} className="me-1" /> فیس بوک </button> <button type="button" class="btn btn-twitter b-r-22 text-white d-inline-flex-center"> <IconBrandTwitter size={18} className="me-1" /> توییتر </button> </div> <div class="col-md-6 col-lg-4 col-12"> <button type="button" class="btn btn-outline-pinterest b-r-22 d-inline-flex-center"> <IconBrandPinterest size={18} className="me-1" /> پینترست </button> <button type="button" class="btn btn-outline-linkedin b-r-22 d-inline-flex-center"> <IconBrandLinkedin size={18} className="me-1" /> لینکدین </button> </div> <div class="col-md-6 col-lg-4 col-12"> <button type="button" class="btn btn-light-reddit b-r-22 d-inline-flex-center"> <IconBrandReddit size={18} className="me-1" /> ردیت </button> <button type="button" class="btn btn-light-twitter b-r-22 d-inline-flex-center"> <IconBrandTwitter size={18} className="me-1" /> توییتر </button> </div> </div>

<div class="row"> <div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list"> <button type="button" class="btn btn-primary active"> <i class="ti ti-download"></i> اصلی </button> <button type="button" class="btn btn-secondary d-lg-inline-flex align-items-center active"> ثانویه <i class="ti ti-alert-triangle m-s-3"></i> </button> </div> <div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list"> <button type="button" class="btn btn-outline-primary active"> <i class="ti ti-download"></i> اصلی </button> <button type="button" class="btn btn-outline-secondary d-lg-inline-flex align-items-center active"> ثانویه <i class="ti ti-alert-triangle m-s-3"></i> </button> </div> <div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list"> <button type="button" class="btn btn-light-primary active"> <i class="ti ti-download"></i> اصلی </button> <button type="button" class="btn btn-light-secondary d-lg-inline-flex align-items-center active"> ثانویه <i class="ti ti-alert-triangle m-s-3"></i> </button> </div> </div>

<div class="row"> <div class="col-lg-6 col-12"> <button class="btn btn-primary d-inline-flex-center" type="button"> <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> درحال بارگذاری... </button> <button class="btn btn-secondary d-inline-flex-center" type="button"> کمی صبرکنید... <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span> </button> <button class="btn btn-success icon-btn" type="button"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">درحال بارگذاری...</span> </button> <button class="btn btn-danger icon-btn" type="button"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">درحال بارگذاری...</span> </button> </div> <div class="col-lg-6 col-12 mb-3"> <button class="btn btn-outline-primary d-inline-flex-center" type="button"> <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> درحال بارگذاری... </button> <button class="btn btn-outline-secondary d-inline-flex-center" type="button"> کمی صبرکنید... <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span> </button> <button class="btn btn-outline-success icon-btn" type="button"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">درحال بارگذاری...</span> </button> <button class="btn btn-outline-danger icon-btn" type="button"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">درحال بارگذاری...</span> </button> </div> <div class="col-lg-6 col-12 mb-3"> <button class="btn btn-light-primary d-inline-flex-center" type="button"> <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> درحال بارگذاری... </button> <button class="btn btn-light-secondary d-inline-flex-center" type="button"> کمی صبرکنید... <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span> </button> <button class="btn btn-light-success icon-btn" type="button"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">درحال بارگذاری...</span> </button> <button class="btn btn-light-danger icon-btn" type="button"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">درحال بارگذاری...</span> </button> </div> </div>

<div class="app-btn-list"> <button type="button" class="btn btn-primary btn-xxl"> [object Object] اصلی </button> <button type="button" class="btn btn-primary btn-xl"> [object Object] اصلی </button> <button type="button" class="btn btn-secondary btn-lg"> [object Object] ثانویه </button> <button type="button" class="btn btn-success "> [object Object] موفقیت آمیز </button> <button type="button" class="btn btn-danger btn-sm"> [object Object] هشدار دهنده </button> <button type="button" class="btn btn-warning btn-xs"> [object Object] هشدار دهنده </button> </div>

<div class="app-btn-list"> <button type="button" class="btn btn-primary b-r-0">اصلی</button> <button type="button" class="btn btn-secondary b-r-6">فرعی</button> <button type="button" class="btn btn-success b-r-10">موفق</button> <button type="button" class="btn btn-danger b-r-22">خطر</button> </div>

<div class="row"> <div class="col-md-6 col-lg-4 col-12"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-secondary dropdown-toggle" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> </div> </div> </div> <div class="col-md-6 col-lg-4 col-12"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-outline-secondary">1</button> <button type="button" class="btn btn-outline-secondary">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> </div> </div> </div> <div class="col-md-6 col-lg-4 col-12"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-light-secondary">1</button> <button type="button" class="btn btn-light-secondary">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-light-secondary dropdown-toggle" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> </div> </div> </div> </div>

<div class="row"> <div class="col-lg-4 col-12 mb-3"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-secondary">نمونه دکمه</button> <button type="button" class="btn btn-secondary">نمونه دکمه</button> <button type="button" class="btn btn-secondary">نمونه دکمه</button> </div> </div> <div class="col-lg-4 col-12 mb-3"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-outline-secondary">نمونه دکمه</button> <button type="button" class="btn btn-outline-secondary">نمونه دکمه</button> <button type="button" class="btn btn-outline-secondary">نمونه دکمه</button> </div> </div> <div class="col-lg-4 col-12 mb-3"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-light-secondary">نمونه دکمه</button> <button type="button" class="btn btn-light-secondary">نمونه دکمه</button> <button type="button" class="btn btn-light-secondary">نمونه دکمه</button> </div> </div> <div class="col-lg-4 col-12 mb-3"> <div class="btn-group-vertical ms-2" role="group" aria-label="Vertical radio toggle button group"> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1"> <label class="btn btn-outline-secondary" for="vbtn-radio1">رادیوباتن 1</label> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2"> <label class="btn btn-outline-secondary" for="vbtn-radio2">رادیوباتن 2</label> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3"> <label class="btn btn-outline-secondary" for="vbtn-radio3">رادیوباتن 3</label> </div> </div> </div>

دکمه‌ها (Buttons)

دکمه‌های پایه

دکمه‌های حاشیه‌دار

دکمه‌های روشن

گروه دکمه‌ها

اندازه‌ها

دکمه‌های آیکون‌دار

رادیوباتن

انواع دکمه های سوشال

دکمه های آیکن

دکمه های سوشال

دکمه‌های غیرفعال

دکمه‌های فعال

دکمه های لودینگ

دکمه‌های تمام‌عرض

دکمه ها با سایزهای مختلف

انواع دکمه های Radius

تو در تو

چک باکس و رادیوباتن

دکمه های عمودی

دکمه‌ها (Buttons)

دکمه‌های پایه

دکمه‌های حاشیه‌دار

دکمه‌های روشن

گروه دکمه‌ها

اندازه‌ها

دکمه‌های آیکون‌دار

رادیوباتن

انواع دکمه های سوشال

دکمه های آیکن

دکمه های سوشال

دکمه‌های غیرفعال

دکمه‌های فعال

دکمه های لودینگ

دکمه‌های تمام‌عرض

دکمه ها با سایزهای مختلف

انواع دکمه های Radius

تو در تو

چک باکس و رادیوباتن

دکمه های عمودی