# Default
<x-button>Primary</x-button>
#
Prop
type
<x-button type="warning">Warning</x-button># Alternative way to set type
<x-button primary>Primary</x-button>
<x-button secondary>Secondary</x-button>
<x-button success>Success</x-button>
<x-button danger>Danger</x-button>
<x-button warning>Warning</x-button>
<x-button info>Info</x-button>
<x-button light>Light</x-button>
<x-button dark>Dark</x-button>
<x-button link>Link</x-button>
#
Prop
outline
<x-button outline>Primary outline</x-button>
<x-button success outline>Success outline</x-button>
#
Prop
size
<x-button size="sm">Small</x-button>
<x-button>Default</x-button>
<x-button size="lg">Large</x-button># Alternative way to set size
<x-button sm>Small</x-button>
<x-button>Default</x-button>
<x-button lg>Large</x-button>
#
Props
disabled
For make a button or link disabled, use the prop
disabled
, as shown below.
<x-button primary disabled>Disabled</x-button>
<x-button.link primary disabled>A disabled link</x-button.link># Custom class
You can set any custom class you want. In this case take into account that only
btn
class will be added, and not
btn-primary
like default.
This is intentionally for allow to style the button as you wish.
<x-button class="bg-info text-white">Custom</x-button># Override class
<x-button override:class="btn bg-warning text-white">Override</x-button># Combine all
Find below an example with all props combined: a large disabled button with dark outline style and custom class
btn-custom
.
<x-button class="btn-custom" dark outline lg disabled>Dark outline large</x-button># Link tag
If you need a button as a
link
tag then use
x-button.link
tag name as shown below.
Everything else works like for button tag explained above.
<x-button.link href="https://github.com/thewebartisan7/posthtml-components">As link tag</x-button.link># Additional attributes
You can pass any additional attributes like for example a
target
:
<x-button.link href="https://github.com/thewebartisan7/posthtml-components" target="_blank">Link with target blank</x-button.link># Close button
A generic close button for dismissing content like modals and alerts.
<!-- Default -->
<x-button.close></x-button.close>
<!-- With custom aria-label (default "Close") -->
<x-button.close label="Close label"></x-button.close>
<!-- Light -->
<x-button.close light></x-button.close># Button group
Group a series of buttons together on a single line or stack them in a vertical column.
<!-- Default -->
<x-button.group>
<x-button>Left</x-button>
<x-button>Middle</x-button>
<x-button>Right</x-button>
</x-button.group>
<!-- Size small via prop size (support also size="lg") -->
<x-button.group size="sm">
<x-button>Left</x-button>
<x-button>Middle</x-button>
<x-button>Right</x-button>
</x-button.group>
<!-- Size large via attribute lg (support also "sm") -->
<x-button.group lg>
<x-button>Left</x-button>
<x-button>Middle</x-button>
<x-button>Right</x-button>
</x-button.group>
<!-- Vertical + custom aria-label (default "Button group") -->
<x-button.group label="My button group" vertical>
<x-button>Left</x-button>
<x-button>Middle</x-button>
<x-button>Right</x-button>
</x-button.group>
<!-- Vertical + size -->
<x-button.group vertical lg>
<x-button>Left</x-button>
<x-button>Middle</x-button>
<x-button>Right</x-button>
</x-button.group>
#
Bootstrap
data-bs-*
attributes
When you need to make a button works with a Bootstrap components such as Modal, Accordion, etc. then you need to use Bootstrap specific
data-bs-*
attributes.
For example for open a Bootstrap Modal component you need to use
data-bs-toggle="modal"
and
data-bs-target="#myModalId"
.
You can use pass this attributes directly to the button, or also use the props
toggle
,
target
and
dismiss
.
<x-button toggle="modal" target="#myModal">Launch modal</x-button>
<x-button dismiss="modal">Close modal</x-button>There is no modal here to launch or close, but inspect the source to see the output. You can find modals demo here .