Developed by Codescandy

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<Button variant="primary" className="mb-2">
    Primary
</Button>
<Button variant="secondary" className="mb-2">
    Secondary
</Button>
<Button variant="success" className="mb-2">
    Success
</Button>
<Button variant="danger" className="mb-2">
    Danger
</Button>
<Button variant="warning" className="mb-2">
    Warning
</Button>
<Button variant="info" className="mb-2">
    Info
</Button>
<Button variant="light" className="mb-2">
    Light
</Button>
<Button variant="dark" className="mb-2">
    Dark
</Button>
<Button variant="gray-400" className="mb-2">
    Gray 400
</Button>
<Button variant="link" className="mb-2">
    Link
</Button>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the.btn-outline-*ones to remove all background images and colors on any button.

<Button variant="outline-primary" className="mb-2">
    Primary
</Button>
<Button variant="outline-secondary" className="mb-2">
    Secondary
</Button>
<Button variant="outline-success" className="mb-2">
    Success
</Button>
<Button variant="outline-danger" className="mb-2">
    Danger
</Button>
<Button variant="outline-warning" className="mb-2">
    Warning
</Button>
<Button variant="outline-info" className="mb-2">
    Info
</Button>
<Button variant="outline-light" className="mb-2">
    Light
</Button>
<Button variant="outline-dark" className="mb-2">
    Dark
</Button>
<Button variant="outline-gray-400" className="mb-2">
    Gray 400
</Button>

Soft buttons

<Button variant="soft-primary" className="mb-2">Primary</Button>
<Button variant="soft-secondary" className="mb-2">Secondary</Button>
<Button variant="soft-success" className="mb-2">Success</Button>
<Button variant="soft-danger" className="mb-2">Danger</Button>
<Button variant="soft-warning" className="mb-2">Warning</Button>
<Button variant="soft-info" className="mb-2">Info</Button>

Ghost buttons

<Button variant="ghost-primary" className="mb-2">
    Primary
</Button>
<Button variant="ghost-secondary" className="mb-2">
    Secondary
</Button>
<Button variant="ghost-success" className="mb-2">
    Success
</Button>
<Button variant="ghost-danger" className="mb-2">
    Danger
</Button>
<Button variant="ghost-warning" className="mb-2">
    Warning
</Button>
<Button variant="ghost-info" className="mb-2">
    Info
</Button>

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link 
<Button href="" variant="primary">
    Link
</Button>
<Button variant="primary" type="submit">
    Buttom
</Button>
<Button as="input" type="button" value="Input" variant="primary" />
<Button as="input" type="submit" value="Submit" />
<Button as="input" type="reset" value="Reset" />

Sizes

Fancy larger or smaller buttons? Add.btn-lgor.btn-smfor additional sizes.

<Button size="lg" variant="primary">
    Large Button
</Button>
<Button variant="primary">
    Default Button
</Button>
<Button size="sm" variant="primary">
    Small Button
</Button>
<Button size="xs" variant="primary">
    Xtra Small Button
</Button>

Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

<div className="d-grid gap-2">
    <Button variant="primary">Button</Button>
    <Button variant="primary">Button</Button>
</div>

Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.

<div className="d-grid gap-2 d-md-block">
    <Button variant="primary">Button</Button>
    <Button variant="primary">Button</Button>
</div>

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6 . Center it horizontally with .mx-auto , too.

<div className="d-grid gap-2 col-6 mx-auto">
    <Button variant="primary">Button</Button>
    <Button variant="primary">Button</Button>
</div>

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.

<div className="d-grid gap-2 d-md-flex justify-content-md-end">
    <Button variant="primary">Button</Button>
    <Button variant="primary">Button</Button>
</div>

Button icons

A contained button with an icon.

<Button variant="primary">
    Your Text Goes Here
    <ShoppingBag size={14} className="ms-1" />
</Button>
With fixed width and height.
<Button variant="primary" className="btn-icon">
    +
</Button>
{" "}
<Button variant="primary" className="btn-icon">
    <Spinner animation="border" size="sm" />
</Button>
{" "}
<Button variant="white" className="btn-icon border border-2 rounded-circle btn-dashed ms-2">
    +
</Button>
Also available in all button sizes.
<Button variant="primary" size="lg">
    +
</Button>
{" "}
<Button variant="primary">
    +
</Button>
{" "}
<Button variant="primary" size="sm">
    +
</Button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.There’s no need to add a class to <button> s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed=“true“ attribute) should you need to replicate the state programmatically.

<Button href="" variant="primary" active>
    Primary link
</Button>
{" "}
<Button href="" variant="secondary" active>
    Link
</Button>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<Button variant="primary" disabled>
    Primary button
</Button>
{" "}
<Button variant="secondary" disabled>
    Button
</Button>

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button> .

<Button variant="primary" active={buttonList.btnOne} onClick={() => handleClick("btnOne")}>
Toggle button
</Button>

<Button variant="primary" active={buttonList.btnTwo} onClick={() => handleClick("btnTwo")}>
Active toggle button
</Button>

<Button variant="primary" disabled>Disabled toggle button</Button>
Contents