# Button
Custom <us-button>
component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, as well as programtic navigation.
# Overview
<us-button variant="primary">
This is a button
</us-button>
2
3
# Links
The component has built-in support href, simply add a href property to use;
<us-button variant="info" href="https://news.bbc.co.uk" target="_blank">
Go somewhere
</us-button>
2
3
# Focus Indication
USWDS, by default, applies a blue rectangle around a button to show focus. This can break some UI, so you have the option to toggle this on or off. But be mindful of accessability implications.
<us-button variant="primary" :no-focus="false">click me to see focus</us-button>
<us-button variant="primary" :no-focus="true">click me, but you won't see focus</us-button>
2
# Progmatic navigation
The component has built-in support for vue-router (opens new window), simply add a to
property to any button such as;
<us-button variant="link" :to="{name: 'nowhere'}">
Take me home
</us-button>
2
3
# Loading animation
Set the isLoading
property to display a loading spinner, this will also put the button into a disabled state so it can not be clicked again.
<us-button variant="primary" :is-loading="isLoading">
Submit
</us-button>
<!-- Button to toggle isLoading flag for testing -->
<us-button variant="link" @click="isLoading = !isLoading">
Toggle Loading Flag
</us-button>
2
3
4
5
6
7
8
# Contextual variants
For proper styling of <us-button>
, use one of the contextual variants by setting the variant prop to one of the following: primary,
secondary,info, success, danger, warning, outline-primary, outline-secondary, outline-info, outline-success, outline-danger,
outline-warning, inverse, link. The default is info.
# Component Reference
# <us-button>
# Properties
Property | Type | Default | Description |
---|---|---|---|
variant | string | info | Applies one of the contextual color variants |
block | string | null | Creates the button as a block element |
type | string | 'button' | Sets the type, such as 'button' or 'submit' |
title | string | null | Sets the title prop, for hover over text |
size | string | null | The size, supports 'lg' and omit for normal |
aria-expanded | string | null | Support for arial-expanded |
aria-controls | string | null | Support for arial-controls |
aria-Label | string | null | |
no-focus | boolean | true | Turn focus indication on or off |
href | string | null | If set, creates a link |
target | string | null | If href is set, this can be one of the href targets so as '_self' |
to | string/object | null | Support for vue-router programtic navigation |
disabled | boolean | null | Disables button |
is-loading | boolean | false | If set, display a loading animation and disable button |