Buttons

Buttons are Bootstrap's core component for triggering various actions. In Shards, they're very flxible, support multiple sizes, states and many more.

Button Themes

Using the theme prop you can easily change the appearance of your button using one the main theme colors: primary, secondary, success, danger, warning, info, light and dark. The default theme value is primary.

<d-button>Primary</d-button>
<d-button theme="secondary">Secondary</d-button>
<d-button theme="success">Success</d-button>
<d-button theme="info">Info</d-button>
<d-button theme="warning">Warning</d-button>
<d-button theme="danger">Danger</d-button>
<d-button theme="light">Light</d-button>
<d-button theme="dark">Dark</d-button>

<!-- buttons-1.vue -->

Outline Styled Buttons

Using the outline prop removes the background color and applies a thin border that make your buttons to look outlined.

<d-button outline>Primary</d-button>
<d-button outline theme="secondary">Secondary</d-button>
<d-button outline theme="success">Success</d-button>
<d-button outline theme="info">Info</d-button>
<d-button outline theme="warning">Warning</d-button>
<d-button outline theme="danger">Danger</d-button>
<d-button outline theme="light">Light</d-button>
<d-button outline theme="dark">Dark</d-button>

<!-- buttons-2.vue -->

Pill Shaped Buttons

Using the pill prop appiles a larger border radius that make your buttons to look more rounded and pill-like.

<d-button pill>Primary</d-button>
<d-button pill theme="secondary">Secondary</d-button>
<d-button pill theme="success">Success</d-button>
<d-button pill theme="info">Info</d-button>
<d-button pill theme="warning">Warning</d-button>
<d-button pill theme="danger">Danger</d-button>
<d-button pill theme="light">Light</d-button>
<d-button pill theme="dark">Dark</d-button>

<!-- buttons-3.vue -->

Mixed Styles

Similarly to Badges you can also mix both pill and outline props to get a mixed "outline-pill" result.

<d-button outline pill>Primary</d-button>
<d-button outline pill theme="secondary">Secondary</d-button>
<d-button outline pill theme="success">Success</d-button>
<d-button outline pill theme="info">Info</d-button>
<d-button outline pill theme="warning">Warning</d-button>
<d-button outline pill theme="danger">Danger</d-button>
<d-button outline pill theme="light">Light</d-button>
<d-button outline pill theme="dark">Dark</d-button>

<!-- buttons-4.vue -->

Squared Style

Using the squared prop you can style your buttons to look, well, squared.

<d-button squared>Primary</d-button>
<d-button squared theme="secondary">Secondary</d-button>
<d-button squared theme="success">Success</d-button>
<d-button squared theme="info">Info</d-button>
<d-button squared theme="warning">Warning</d-button>
<d-button squared theme="danger">Danger</d-button>
<d-button squared theme="light">Light</d-button>
<d-button squared theme="dark">Dark</d-button>

<!-- buttons-5.vue -->

Note: The pill prop has priority over the squared prop.

Mixed Outline-Squared Style

Mixing the outline and squared prop is also possible and it will render an outlined and squared button.

<d-button outline squared>Primary</d-button>
<d-button outline squared theme="secondary">Secondary</d-button>
<d-button outline squared theme="success">Success</d-button>
<d-button outline squared theme="info">Info</d-button>
<d-button outline squared theme="warning">Warning</d-button>
<d-button outline squared theme="danger">Danger</d-button>
<d-button outline squared theme="light">Light</d-button>
<d-button outline squared theme="dark">Dark</d-button>

<!-- buttons-6.vue -->

Button Sizes

Buttons come in three size variations: lg, normal (default) and sm. You can control the size of your buttons using the size prop.

<d-button size="lg">Large</d-button>
<d-button>Normal</d-button>
<d-button size="sm">Small</d-button>

<!-- buttons-7.vue -->

Active State

If you need to control the active state and appearance of your button programatically, you can use the active prop.

<d-button active theme="success">Success Active</d-button>
<d-button active theme="danger">Danger Active</d-button>

<!-- buttons-8.vue -->

Disabled State

Similarly to the active state, the disabled state can also be crontrolled via the disabled prop.

<d-button disabled theme="success">Success Disabled</d-button>
<d-button disabled theme="danger">Danger Disabled</d-button>

<!-- buttons-9.vue -->

Toggle State

Toggling a button's state is currently not supported, but available on the roadmap.

Change Tags

Changing the button's tag (eg. using native <a> or <input> elements) is currently not supported, but available on the roadmap.

Block Level Buttons

Using the block-level prop you can make buttons display using the full-width of their parent element

<d-button block-level>Primary</d-button>
<d-button block-level theme="secondary">Secondary</d-button>

<!-- buttons-10.vue -->

Alias

The <d-button> component is also available as <d-btn>.

Props

Prop	Description	Type	Default	Required
:theme	The theme style.	`String`	"primary"	False
:outline	Whether it should be displayed as an outline, or not.	`Boolean`	false	False
:pill	Whether it should be displayed as a pill, or not.	`Boolean`	false	False
:squared	Whether it should be displayed as a squared, or not.	`Boolean`	false	False
:size	The button's sizesize.	`String`	null	False
:block-level	Whether it should be displayed as block, or not.	`Boolean`	false	False
:disabled	Whether it should be displayed as disabled, or not.	`Boolean`	false	False
:active	Whether it should be displayed as active, or not.	`Boolean`	false	False

Events

Event	Description
@click	Triggered when the button is clicked.

Subcomponents

The following subcomponents are available for the <d-button/> component:

<d-button-close/>

Props

Prop	Description	Type	Default	Required
:disabled	Whether it should be displayed as disabled, or not.	`Boolean`	false	False
:theme	The theme color value.	`String`	null	False
:aria-label	The aria-label value.	`String`	"Close"	False