#
  • Dashboard
  • dashboard4
    • Project
    • Ecommerce
  • apps
    • Calendar
    • Profile Page
      • Profile
      • Setting
    • Projects Page
      • Projects
      • Projects Details
    • To-Do
    • Team
    • Api
    • Ticket
      • Ticket
      • Ticket Details
    • Emails Page
      • Email
      • Read Email
    • E-shop
      • Cart
      • Product
      • Add Product
      • Product-Details
      • Product list
      • Orders
      • Orders Details
      • Orders List
      • Checkout
      • Wishlist
    • Invoice
    • Chat
    • File Manager
    • Bookmark
    • kanban board
    • Timeline
    • FAQ
    • Pricing
    • Gallery
    • Blog Page
      • Blog
      • Blog Details
      • Add Blog
  • Widgets
  • Component
  • Ui Kits
    • Alert
    • Badges
    • Buttons
    • Cards
    • Dropdown
    • Grid
    • Avatar
    • Tabs
    • Accordions
    • Progress
    • Notifications
    • Lists
    • Helper Classes
    • Background
    • Divider
    • Ribbons
    • Editor
    • Collapse
    • Shadow
    • Wrapper
    • Bullet
    • Placeholder
    • Alignment Things
  • Advanced UI12+
    • Modals
    • OffCanvas Toggle
    • Sweet Alert
    • Scrollbar
    • Spinners
    • Animation
    • Video Embed
    • Tour
    • Slider
    • Bootstrap Slider
    • Scrollpy
    • Tooltip & Popovers
    • Rating
    • Prismjs
    • Count Down
    • Count Up
    • Draggable
    • Tree View
  • Icons
    • Fontawesome
    • Flag
    • Tabler
    • Weather
    • Animated
    • Iconoir
    • Phosphor
  • Misc
  • Map & Charts
  • Map & Charts
    • Google Maps
    • Leaflet map
  • Chart
    • Chart js
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range-Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial bar
      • Radar
  • Table & forms
  • Table
    • Basic Table
    • Data Table
    • List Js
    • Advance Table
  • Forms elements
    • Form Validation
    • Base Input
    • Checkbox & Radio
    • Input Groups
    • Input Masks
    • Floating Labels
    • Datetimepicker
    • Touch spin
    • Select2
    • Switch
    • Range Slider
    • Typeahead
    • Textarea
    • Clipboard
    • File Upload
    • Dual List Boxes
    • Default Forms
  • Ready to usenew
    • Form Wizards
    • Form Wizards 1
    • Form Wizards 2
    • Ready To Use Form
    • Ready To Use Tables
  • Pages
  • Auth Pages
    • Sign In
    • Sign In with Bg-image
    • Sign Up
    • Sign Up with Bg-image
    • Password Reset
    • Password Reset with Bg-image
    • Password Create
    • Password Create with Bg-image
    • Lock Screen
    • Lock Screen with Bg-image
    • Two Step Verification
    • Two Step Verification with Bg-image
  • Error pages
    • Bad Request
    • Forbidden
    • Not Found
    • Internal Server Error
    • Service Unavailable
  • Other pages
    • Blank
    • Maintenance
    • Landing Pages
    • Coming Soon
    • Sitemap
    • Privacy Policy
    • Terms & Conditions
  • Others
  • 2 level
    • Blank
    • Another level
      • Blank
  • Document
  • Support
  • 26 °C
  • EN
  • 5
  • avatar

  • Copyright © 2025 axelit. All rights reserved 💖

  • V1.0.0
  • Need Help

Buttons

  • Ui Kits
  • Buttons
Basic Buttons
<Card>
  <CardHeader>
    <h5>Basic Buttons</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>
Outline Buttons
<Card>
  <CardHeader>
    <h5>Outline Buttons</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>
Light Buttons
<Card>
  <CardHeader>
    <h5>Light Buttons</h5>
  </CardHeader>
  <CardBody>
    <Button color="light-primary" type="button">Primary</Button>
    <Button color="light-secondary" type="button">Secondary</Button>
    <Button color="light-success" type="button">Success</Button>
    <Button color="light-danger" type="button">Danger</Button>
    <Button color="light-warning" type="button">Warning</Button>
    <Button color="light-info" type="button">Info</Button>
    <Button color="light-light" type="button">Light</Button>
    <Button color="light-dark" type="button">Dark</Button>
    <Button color="light-link" type="button">Link</Button>
  </CardBody>
</Card>
Button Group
Active linkLinkLink
Active linkLinkLink
Active linkLinkLink
<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">Active link</a>
      <a href="#" className="btn btn-primary " aria-current="">Link</a>
      <a href="#" className="btn btn-primary " aria-current="">Link</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="">Active link</a>
      <a href="#" className="btn btn-outline-secondary " aria-current="">Link</a>
      <a href="#" className="btn btn-outline-secondary " aria-current="">Link</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="">Active link</a>
      <a href="#" className="btn btn-light-success " aria-current="">Link</a>
      <a href="#" className="btn btn-light-success " aria-current="">Link</a>
    </div>
  </div>
</div>
Sizes
<div className="row">
  <div className="col-lg-4 col-12 mb-3">
    <div className="btn-group btn-group-lg" role="group" aria-label="Large button group">
      <Button type="Button" className="btn btn-outline-primary">Left</Button>
      <Button type="Button" className="btn btn-outline-primary">Middle</Button>
      <Button type="Button" className="btn btn-outline-primary">Right</Button>
    </div>
  </div>
  <div className="col-lg-4 col-12 mb-3">
    <div className="btn-group btn-group" role="group" aria-label="Default button group">
      <Button type="Button" className="btn btn-outline-secondary">Left</Button>
      <Button type="Button" className="btn btn-outline-secondary">Middle</Button>
      <Button type="Button" className="btn btn-outline-secondary">Right</Button>
    </div>
  </div>
  <div className="col-lg-4 col-12 mb-3">
    <div className="btn-group btn-group-sm" role="group" aria-label="Small button group">
      <Button type="Button" className="btn btn-outline-success">Left</Button>
      <Button type="Button" className="btn btn-outline-success">Middle</Button>
      <Button type="Button" className="btn btn-outline-success">Right</Button>
    </div>
  </div>
</div>
Icon Button
<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" /> Primary
    </Button>
    <Button type="button" className="btn btn-secondary d-lg-inline-flex align-items-center">
      Secondary <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" /> Primary
    </Button>
    <Button type="button" className="btn btn-outline-secondary d-lg-inline-flex align-items-center">
      Secondary <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" /> Primary
    </Button>
    <Button type="button" className="btn btn-light-secondary d-lg-inline-flex align-items-center">
      Secondary <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
</div>
Radious
<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" />Primary
    </Button>
    <Button type="button" class="btn btn-secondary rounded-pill d-lg-inline-flex align-items-center">
      Secondary <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" />Primary
    </Button>
    <Button type="button" class="btn btn-outline-secondary rounded-pill d-lg-inline-flex align-items-center">
      Secondary <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" />Primary
    </Button>
    <Button type="button" class="btn btn-light-secondary rounded-pill d-lg-inline-flex align-items-center">
      Secondary <IconAlertTriangle size={18} className="ms-2" />
    </Button>
  </div>
</div>
Social Buttons
<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" /> Facebook
    </button>
    <button type="button" class="btn btn-twitter b-r-22 text-white d-inline-flex-center">
      <IconBrandTwitter size={18} className="me-1" /> Twitter
    </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" /> Pinterest
    </button>
    <button type="button" class="btn btn-outline-linkedin b-r-22 d-inline-flex-center">
      <IconBrandLinkedin size={18} className="me-1" /> Linkedin
    </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" /> Reddit
    </button>
    <button type="button" class="btn btn-light-twitter b-r-22 d-inline-flex-center">
      <IconBrandTwitter size={18} className="me-1" /> Twitter
    </button>
  </div>
</div>
Icon Buttons
<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>
Social Buttons
<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>
Disable Buttons
Active Buttons

<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> Primary
        </button>
        <button type="button" class="btn btn-secondary d-lg-inline-flex align-items-center active">
            Secondary <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> Primary
        </button>
        <button type="button" class="btn btn-outline-secondary d-lg-inline-flex align-items-center active">
            Secondary <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> Primary
        </button>
        <button type="button" class="btn btn-light-secondary d-lg-inline-flex align-items-center active">
            Secondary <i class="ti ti-alert-triangle m-s-3"></i>
        </button>
    </div>
</div>
Loading Buttons

<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>
            Loading...
        </button>
        <button class="btn btn-secondary d-inline-flex-center" type="button">
            Wait... <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">Loading...</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">Loading...</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>
            Loading...
        </button>
        <button class="btn btn-outline-secondary d-inline-flex-center" type="button">
            Wait... <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">Loading...</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">Loading...</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>
            Loading...
        </button>
        <button class="btn btn-light-secondary d-inline-flex-center" type="button">
            Wait... <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">Loading...</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">Loading...</span>
        </button>
    </div>
</div>
Block Buttons

<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>
<button class="btn btn-secondary w-100" type="button">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>
<button class="btn btn-outline-secondary w-100" type="button">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>
<button class="btn btn-light-secondary w-100" type="button">Button</button>
        </div>
    </div>
</div>
Button with Sizes

<div class="app-btn-list">
  
    <button type="button" class="btn btn-primary btn-xxl">
      [object Object] Primary
    </button>
  

    <button type="button" class="btn btn-primary btn-xl">
      [object Object] Primary
    </button>
  

    <button type="button" class="btn btn-secondary btn-lg">
      [object Object] Secondary
    </button>
  

    <button type="button" class="btn btn-success ">
      [object Object] Success
    </button>
  

    <button type="button" class="btn btn-danger btn-sm">
      [object Object] Danger
    </button>
  

    <button type="button" class="btn btn-warning btn-xs">
      [object Object] Warning
    </button>
  
</div>
Radius Button

<div class="app-btn-list">
  
    <button type="button" class="btn btn-primary b-r-0">Primary</button>
  

    <button type="button" class="btn btn-secondary b-r-6">Secondary</button>
  

    <button type="button" class="btn btn-success b-r-10">Success</button>
  

    <button type="button" class="btn btn-danger b-r-22">Danger</button>
  
</div>
Nesting
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link

<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>
Checkbox Radio
Button Vertical

<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>
            <button type="button" class="btn btn-secondary">Button</button>
            <button type="button" class="btn btn-secondary">Button</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>
            <button type="button" class="btn btn-outline-secondary">Button</button>
            <button type="button" class="btn btn-outline-secondary">Button</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>
            <button type="button" class="btn btn-light-secondary">Button</button>
            <button type="button" class="btn btn-light-secondary">Button</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">Radio 1</label>
            <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2">
            <label class="btn btn-outline-secondary" for="vbtn-radio2">Radio 2</label>
            <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3">
            <label class="btn btn-outline-secondary" for="vbtn-radio3">Radio 3</label>
        </div>
    </div>
</div>