Buttons

Default Buttons

Show Code

Use the Button tag to show the default button style.


<!-- Base Buttons -->
<Button color="primary"> Primary </Button>

<Button color="secondary"> Secondary </Button>

<Button color="success"> Success </Button>

<Button color="info"> Info </Button>

<Button color="warning"> Warning </Button>

<Button color="danger"> Danger </Button>

<Button color="dark"> Dark </Button>

<Button color="link"> Link </Button>

<Button color="light"> Light </Button>

Outline Buttons

Show Code

Use outline atrribute with the below-mentioned variation to create a button with the outline.


<!-- Outline Buttons -->
<Button color="primary" outline > primary </Button>

<Button color="secondary" outline > Secondary </Button>

<Button color="success" outline > Success </Button>

<Button color="info" outline > Info </Button>

<Button color="warning" outline > Warning </Button>

<Button color="danger" outline > Danger </Button>

<Button color="dark" outline > Dark </Button>

<Button color="light" outline > Light </Button>

Rounded Buttons

Show Code

Use the rounded-pill class to make a rounded button.


<!-- Rounded Buttons -->
<Button color="primary" class="rounded-pill"> Primary </Button>

<Button color="secondary" class="rounded-pill"> Secondary </Button>

<Button color="success" class="rounded-pill"> Success </Button>

<Button color="info" class="rounded-pill"> Info </Button>

<Button color="warning" class="rounded-pill"> Warning </Button>

<Button color="danger" class="rounded-pill"> Danger </Button>

<Button color="dark" class="rounded-pill"> Dark </Button>

<Button color="light" class="rounded-pill"> Light </Button>

Soft Buttons

Show Code

Use btn-soft- class with the below-mentioned variation to create a button with the soft background.


<!-- Soft Buttons -->
<Button class="btn-soft-primary"> Primary </Button>

<Button class="btn-soft-secondary"> Secondary </Button>

<Button class="btn-soft-success"> Success </Button>

<Button class="btn-soft-info"> Info </Button>

<Button class="btn-soft-warning"> Warning </Button>

<Button class="btn-soft-danger"> Danger </Button>

<Button class="btn-soft-dark"> Dark </Button>

Ghost Buttons

Show Code

Use btn-ghost- class with the below-mentioned variation to create a button with the transparent background.


<!-- Ghost Buttons -->

<Button color="primary" outline class="btn btn-ghost-primary">Primary</Button>

<Button color="secondary" outline class="btn btn-ghost-secondary">Secondary</Button>

<Button color="success" outline class="btn btn-ghost-success">Success</Button>

<Button color="info" outline class="btn btn-ghost-info">Info</Button>

<Button color="warning" outline class="btn btn-ghost-warning">Warning</Button>

<Button color="danger" outline class="btn btn-ghost-danger">Danger</Button>

<Button color="dark" outline class="btn btn-ghost-dark">Dark</Button>

Gradient Buttons

Show Code

Use bg-gradient class to create a gradient button.


<!-- Gradient Buttons -->
<Button color="primary" class="bg-gradient"> Primary </Button>

<Button color="secondary" class="bg-gradient"> Secondary </Button>

<Button color="success" class="bg-gradient"> Success </Button>

<Button color="info" class="bg-gradient"> Info </Button>

<Button color="warning" class="bg-gradient"> Warning </Button>

<Button color="danger" class="bg-gradient"> Danger </Button>

<Button color="dark" class="bg-gradient"> Dark </Button>

<Button color="light" class="bg-gradient"> Light </Button>

Animation Buttons

Show Code

Use bg-animation class to create an animated button.


<!-- Animation Buttons -->
<Button color="primary" class="btn-animation" data-text="Primary"> <span>Primary</span> </Button>

<Button color="secondary" class="btn-animation" data-text="Secondary"> <span>Secondary</span> </Button>

<Button color="success" class="btn-animation" data-text="Success"> <span>Success</span> </Button>

<Button color="info" class="btn-animation" data-text="Info"> <span>Info</span> </Button>

<Button color="warning" class="btn-animation" data-text="Warning"> <span>Warning</span> </Button>

<Button color="danger" class="btn-animation" data-text="Danger"> <span>Danger</span> </Button>

<Button color="dark" class="btn-animation" data-text="Dark"> <span>Dark</span> </Button>

Buttons with Label

Show Code

Use btn-label class to create a button with the label.


<!-- Buttons with Label -->
<Button color="primary" class="btn-label"> <i class="ri-user-smile-line label-icon align-middle fs-16 me-2"></i> Primary </Button>

<Button color="success" class="btn-label"> <i class="ri-check-double-line label-icon align-middle fs-16 me-2"></i> Success </Button>

<Button color="warning" class="btn-label"> <i class="ri-error-warning-line label-icon align-middle fs-16 me-2"></i> Warning </Button>

<!-- Rounded with Label -->
<Button color="primary" class="btn-label rounded-pill"> <i class="ri-user-smile-line label-icon align-middle fs-16 me-2 rounded-pill"></i> Primary </Button>

<Button color="success" class="btn-label rounded-pill"> <i class="ri-check-double-line label-icon align-middle fs-16 me-2 rounded-pill"></i> Success </Button>

<Button color="warning" class="btn-label rounded-pill"> <i class="ri-error-warning-line label-icon align-middle fs-16 me-2 rounded-pill"></i> Warning </Button>

<!-- Buttons with Label Right -->
<Button color="primary" class="btn-label right"> <i class="ri-user-smile-line label-icon align-middle fs-16 ms-2"></i> Primary </Button>

<Button color="success" class="btn-label right rounded-pill"> <i class="ri-check-double-line label-icon align-middle rounded-pill fs-16 ms-2"></i> Success </Button>

Load More Buttons

Show Code

Example of loading buttons.


<!-- Load More Buttons -->

<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <Button color="primary" class="btn-load" outline>
        <span class="d-flex align-items-center">
            <Spinner size="sm" class="flex-shrink-0"> Loading... </Spinner>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </Button>
    <Button color="success" class="btn-load">
        <span class="d-flex align-items-center">
            <Spinner size="sm" class="flex-shrink-0"> Loading... </Spinner>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </Button>
    <Button color="secondary" class="btn-load" outline>
        <span class="d-flex align-items-center">
            <Spinner size="sm" type="grow" class="flex-shrink-0"> Loading... </Spinner>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </Button>
    <Button color="danger" class="btn-load">
        <span class="d-flex align-items-center">
            <Spinner size="sm" type="grow" class="flex-shrink-0"> Loading... </Spinner>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </Button>
</div>

<div class="d-flex flex-wrap gap-2 mb-3 mb-lg-0">
    <Button color="primary" class="btn-load" outline>
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <Spinner size="sm" class="flex-shrink-0" role="status"> Loading... </Spinner>
        </span>
    </Button>
    <Button color="success" class="btn-load">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <Spinner size="sm" class="flex-shrink-0" role="status"> Loading... </Spinner>
        </span>
    </Button>
    <Button color="warning" class="btn-load" outline>
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <Spinner size="sm" type="grow" class="flex-shrink-0" role="status"> Loading... </Spinner>
        </span>
    </Button>
    <Button color="info" class="btn-load">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <Spinner size="sm" type="grow" class="flex-shrink-0" role="status"> Loading... </Spinner>
        </span>
    </Button>
</div>

Border Buttons

Show Code

Example of simple bottom borderd buttons.

<!-- Border Buttons -->

<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <Button color="primary" class="btn-border">Primary</Button>
    <Button color="secondary" class="btn-border">Secondary</Button>
    <Button color="success" class="btn-border">Success</Button>
    <Button color="warning" class="btn-border">Warning</Button>
    <Button color="danger" class="btn-border">Danger</Button>
</div>

<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <Button color="primary" outline class="btn-border">Primary</Button>
    <Button color="secondary" outline class="btn-border">Secondary</Button>
    <Button color="success" outline class="btn-border">Success</Button>
    <Button class="btn-soft-warning btn-border">Warning</Button>
    <Button class="btn-soft-danger btn-border">Danger</Button>
    <Button class="btn-soft-dark btn-border">Dark</Button>
</div>

Custom Toggle Buttons

Show Code

Example of toggle buttons.

<!-- Custom Toggle Buttons -->

<div class="d-flex flex-wrap align-items-center gap-2">
    <Button color='primary' class="custom-toggle active" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-alarm-line align-bottom"></i> Active</span>
        <span class="icon-off">Unactive</span>
    </Button>
    <Button color='secondary' class="custom-toggle active" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-user-add-line align-bottom me-1"></i> Connect</span>
        <span class="icon-off"><i class="ri-check-fill align-bottom me-1"></i> Unconnect</span>
    </Button>
    <Button color='success' class="custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-thumb-up-line align-bottom me-1"></i> Yes</span>
        <span class="icon-off"><i class="ri-thumb-down-line align-bottom me-1"></i> No</span>
    </Button>
    <Button color='warning' class="custom-toggle active" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
        <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
    </Button>
    <Button color='danger' class="custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on">On</span>
        <span class="icon-off">Off</span>
    </Button>
    <Button color='dark' class="custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-bookmark-line align-bottom me-1"></i> Bookmark</span>
        <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom me-1"></i> Unbookmark</span>
    </Button>
</div>

<div class="d-flex flex-wrap align-items-center gap-2">
    <Button color="primary" outline class="custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on">Active</span>
        <span class="icon-off">Unactive</span>
    </Button>
    <Button color="secondary" outline class="custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
        <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
    </Button>
    <Button color="success" outline class="custom-toggle active" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on">On</span>
        <span class="icon-off">Off</span>
    </Button>
    <Button color="warning" outline class="btn-soft-danger custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on">Follow</span>
        <span class="icon-off">Unfollow</span>
    </Button>
    <Button color="danger" outline class="custom-toggle" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on">On</span>
        <span class="icon-off">Off</span>
    </Button>
    <Button class="btn-dark custom-toggle active" onClick={(e) => favouriteBtn(e.target)}>
        <span class="icon-on"><i class="ri-bookmark-line align-bottom"></i></span>
        <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom"></i></span>
    </Button>
</div>

Buttons Sizes

Show Code

Use btn-lg class to create a large size button and btn-sm class to create a small size button.


<!-- Large Button -->
<Button size="lg" color="primary"> Large button </Button>

<Button size="lg" color="light"> Large button </Button>

<!-- Small Button -->
<Button size="sm" color="primary"> Small button </Button>

<Button size="sm" color="light"> Small button </Button>

Buttons Width

Show Code

Use w-xs,w-sm,w-md,w-lg class to make different sized buttons respectively.


<!-- Width Button -->
<Button color="primary" class="w-xs"> Xs </Button>

<Button color="danger" class="w-sm"> Small </Button>

<Button color="warning" class="w-md"> Medium </Button>

<Button color="success" class="w-lg"> Large </Button>

Buttons Tag

Show Code

Use btn class with different HTML elements. (though some browsers may apply a slightly different rendering)

Link


<!-- Tag Button -->
<Link href={null} class="btn btn-primary"> Link </Link>

<Button color="success" type="submit"> Button </Button>

<Button color="info" type="button"> Input </Button>

<Button color="danger" type="submit"> Submit </Button>

<Button color="warning" type="reset"> Reset </Button>

Base class

Show Code

Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.

                                <Button class="" color="">Base Class</Button>

Custom sizing with CSS variables

Show Code

You can even roll your own custom sizing with CSS variables:

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

Buttons Toggle Status

Show Code

Use data-bs-toggle="button" to toggle a button’s active state.

                                <!-- Toggle Button Status -->
                                    <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="button" aria-pressed="false">
                                    Single toggle
                                    </button>

Buttons Grid

Show Code

Use d-grid class to create a full-width block button.


<!-- Buttons Grid -->
<div class="d-grid gap-2">
    <Button color="primary"> Button </Button>
    <Button color="primary"> Button </Button>
</div>

Checkbox & Radio Buttons

Show Code

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

<div class="d-flex flex-wrap align-items-center gap-2">
<ButtonGroup>
    <input type="checkbox" class="btn-check" id="btncheck1" checked />
    <Button color="primary" class="mb-0" id="btncheck1"> Checkbox 1 </Button>

    <input type="checkbox" class="btn-check" id="btncheck2" />
    <Button color="primary" class="mb-0" id="btncheck2"> Checkbox 2 </Button>

    <input type="checkbox" class="btn-check" id="btncheck3" />
    <Button color="primary" class="mb-0" id="btncheck3"> Checkbox 3 </Button>
</ButtonGroup>

<ButtonGroup>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked />
    <Button color="secondary" class="mb-0" id="btnradio1" outline> Radio 1 </Button>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" />
    <Button color="secondary" class="mb-0" id="btnradio2" outline> Radio 2 </Button>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" />
    <Button color="secondary" class="mb-0" id="btnradio3" outline> Radio 3 </Button>

</ButtonGroup>
</div>

Buttons Group

Show Code

Use the btn-group class in the parent class to wrap a series of buttons.


<!-- Buttons Group -->
<ButtonGroup>
    <Button color="primary"> Left </Button>
    <Button color="primary"> Middle </Button>
    <Button color="primary"> Right </Button>
</ButtonGroup>

<!-- Radio Buttons -->
<ButtonGroup class="mt-4 mt-sm-0">
    <Button color="light" class="btn-icon"> <i class="ri-align-right" /> </Button>
    <Button color="light" class="btn-icon"> <i class="ri-align-center" /> </Button>
    <Button color="light" class="btn-icon"> <i class="ri-align-left" /> </Button>
</ButtonGroup>

Icon Buttons

Show Code

Use btn-icon class to wrap icon in button


<!-- Buttons Group -->
<Button color="primary" class="btn-icon"> <i class="ri-map-pin-line" /> </Button>
<Button color="danger" class="btn-icon"> <i class="ri-delete-bin-5-line" /> </Button>
<Button color="success" class="btn-icon"> <i class="ri-check-double-line" /> </Button>
<Button color="light" class="btn-icon"> <i class="ri-brush-2-fill" /> </Button>

<Button color="primary" class="btn-icon" outline> <i class="ri-24-hours-fill" /> </Button>
<Button color="danger" class="btn-icon" outline> <i class="ri-customer-service-2-line" /> </Button>
<Button color="success" class="btn-icon" outline> <i class="ri-mail-send-line" /> </Button>
<Button color="warning" class="btn-icon" outline> <i class="ri-menu-2-line" /> </Button>

Buttons Toolbar

Show Code

Use btn-toolbar class to combine sets of button groups into more complex components.


<!-- Buttons Toolbar -->
<ButtonToolbar>
    <ButtonGroup class="me-2">
        <Button color="light">1</Button>
        <Button color="light">2</Button>
        <Button color="light">3</Button>
        <Button color="light">4</Button>
    </ButtonGroup>
    <ButtonGroup class="me-2">
        <Button color="light">5</Button>
        <Button color="light">6</Button>
        <Button color="light">7</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button color="light">8</Button>
    </ButtonGroup>
</ButtonToolbar>

Button Group Sizing

Show Code

Use btn-group- class with the below-mentioned variation to set the different sizes of button groups.


<!-- Group Buttons Sizing -->
<ButtonGroup size="lg">
    <Button color="primary">Left</Button>
    <Button color="primary">Middle</Button>
    <Button color="primary">Right</Button>
</ButtonGroup>

<ButtonGroup class="mt-2">
    <Button color="light">Left</Button>
    <Button color="light">Middle</Button>
    <Button color="light">Right</Button>
</ButtonGroup>

<ButtonGroup size="sm" class="mt-2">
    <Button color="secondary">Left</Button>
    <Button color="secondary">Middle</Button>
    <Button color="secondary">Right</Button>
</ButtonGroup>

Vertical Variation

Show Code

Make a set of buttons appear vertically stacked .Split button dropdowns are not supported here.

<Row>
<div class="col-auto">
    <ButtonGroup>
        <Button color="primary">1</Button>
        <Button color="primary">2</Button>
        <Dropdown id="btnGroupDrop1">
            <DropdownToggle color="primary" caret>
                Dropdown
            </DropdownToggle>
            <DropdownMenu>
                <DropdownItem> Dropdown link </DropdownItem>
                <DropdownItem> Dropdown link </DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </ButtonGroup>
</div>
<div class="col-auto">
    <ButtonGroup vertical>
        <Button color="light">Button</Button>

        <Dropdown id="btnGroupVerticalDrop1">
            <DropdownToggle color="light" caret>
                Dropdown
            </DropdownToggle>
            <DropdownMenu>
                <DropdownItem> Dropdown link </DropdownItem>
                <DropdownItem> Dropdown link </DropdownItem>
            </DropdownMenu>
        </Dropdown>

        <Button color="light">Button</Button>
        <Button color="light">Button</Button>
    </ButtonGroup>
</div>
<div class="col-auto">
    <ButtonGroup vertical>
        <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio1" checked />
        <Button color="secondary" for="vbtn-radio1" outline>Radio 1</Button>
        <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio2" />
        <Button color="secondary" for="vbtn-radio2" outline>Radio 2</Button>
        <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio3" />
        <Button color="secondary" for="vbtn-radio3" outline>Radio 3</Button>
    </ButtonGroup>
</div>
</Row>

Focus Ring

Show Code

Click directly on the link below to see the focus ring in action.

Focus Ring Custom focus ring Blurry offset focus ring

                                
<Link href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" >Focus Ring</Link>
<Link href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--vz-focus-ring-color: rgba(118, 93, 255, .25)">Custom focus ring</Link>
<Link href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--vz-focus-ring-x: 10px; --vz-focus-ring-y: 10px; --vz-focus-ring-blur: 4px">Blurry offset focus ring</Link>

Focus Ring Utilities

Show Code

In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.

                                
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2" >Primary focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2" >Secondary focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2" >Success focus</Link>
									</p>
									<p class="mb-lg-0">
										<Link href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2" >Danger focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-warning  py-1 px-2 text-decoration-none border rounded-2" >Warning focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2" >Info focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2" >Light focus</Link>
									</p>
									<p>
										<Link href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2" >Dark focus</Link>
									</p>

Recent Searches

Pages

Members

Angela Bernier

David Grasso

Mike Bunch

Web Apps

My Cart

Your Cart is Empty!

Branded T-Shirts

$320

Bentwood Chair

$89

Borosil Paper Cup

$750

Gray Styled T-Shirt

$1250

Stillbird Helmet

$990

$3399.00

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Hey! You have no any notifications

Buttons

Default Buttons

Outline Buttons

Rounded Buttons

Soft Buttons

Ghost Buttons

Gradient Buttons

Animation Buttons

Buttons with Label

Load More Buttons

Border Buttons

Custom Toggle Buttons

Buttons Sizes

Buttons Width

Buttons Tag

Base class

Custom sizing with CSS variables

Buttons Toggle Status

Buttons Grid

Checkbox & Radio Buttons

Buttons Group

Icon Buttons

Buttons Toolbar

Button Group Sizing

Vertical Variation

Focus Ring

Focus Ring Utilities