Button
How it works
Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
There is three types of tags that can be used for create a button: button, a and input.
Basic example
<x-button>Default</x-button>
<x-button type="submit">Submit</x-button>
<x-button disabled>Disabled</x-button>
<x-button.link>Link</x-button.link>
<x-button.link href="/docs/components/buttons">Link</x-button.link>
<x-button.link disabled>Disabled Link</x-button.link>
<x-button.input>Type input</x-button.input><button type="button"
class="btn btn-primary">Default</button> <button type="submit"
class="btn btn-primary">Submit</button> <button type="button"
class="btn btn-primary"
disabled="disabled">Disabled</button> <a href="#"
role="button"
class="btn btn-primary">Link</a> <a href="/docs/components/buttons"
class="btn btn-primary">Link</a> <a href="#"
role="button"
tabindex="-1"
aria-disabled="true"
class="btn btn-primary disabled">Disabled Link</a>
<form>
<input type="button"
class="btn btn-primary"
value="Type input">
</form>Colored example
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
In need of a button, but not the hefty background colors they bring? Add prop outline to remove all background colors on any button.
<x-button color="primary">primary</x-button>
<x-button color="secondary">secondary</x-button>
<x-button color="success">success</x-button>
<x-button color="danger">danger</x-button>
<x-button color="warning">warning</x-button>
<x-button color="info">info</x-button>
<x-button color="light">light</x-button>
<x-button color="dark">dark</x-button>
<x-button color="link">link</x-button>
<x-button color="primary" outline>primary</x-button>
<x-button color="secondary" outline>secondary</x-button>
<x-button color="success" outline>success</x-button>
<x-button color="danger" outline>danger</x-button>
<x-button color="warning" outline>warning</x-button>
<x-button color="info" outline>info</x-button>
<x-button color="light" outline>light</x-button>
<x-button color="dark" outline>dark</x-button>
<x-button color="link" outline>link</x-button><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>
<hr>
<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> <button type="button"
class="btn btn-outline-link">Link</button>Sizes
All sizes variant. Use prop small or large to change default button size.
<x-button small>Small</x-button>
<x-button>Normal</x-button>
<x-button large>Large</x-button><button type="button"
class="btn btn-primary btn-sm">Small</button> <button type="button"
class="btn btn-primary">Normal</button> <button type="button"
class="btn btn-primary btn-lg">Large</button>Toggle states
Button with toggle states. Add prop active to make active by default.
<x-button toggle="button">Toggle Button</x-button>
<x-button toggle="button" active>Active</x-button>
<x-button toggle="button">Toggle Link</x-button>
<x-button toggle="button" active>Active Link</x-button><button type="button"
data-bs-toggle="button"
aria-pressed="false"
class="btn btn-primary">Toggle Button</button> <button type="button"
data-bs-toggle="button"
aria-pressed="true"
class="btn btn-primary active">Active</button> <button type="button"
data-bs-toggle="button"
aria-pressed="false"
class="btn btn-primary">Toggle Link</button> <button type="button"
data-bs-toggle="button"
aria-pressed="true"
class="btn btn-primary active">Active Link</button>Button group
Group a series of buttons together on a single line or stack them in a vertical column by wrapping buttons inside component x-button.group as shown below.
Ensure correct label for assistive technologies such as screen readers by using prop label.
You can also use prop size to x-button.group component instead of applying button sizing to every button in a group.
Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
Ensure correct label for assistive technologies such as screen readers by using prop label.