There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|
<!-- Primary -->
<button class="usa-button">Primary buttons</button>
<button class="usa-button usa-button-active">Active</button>
<button class="usa-button usa-button-hover">Hover</button>
<!-- Primary Alt -->
<button class="usa-button-primary-alt">Primary alt buttons</button>
<button class="usa-button-primary-alt usa-button-active">Active</button>
<button class="usa-button-primary-alt usa-button-hover">Hover</button>
<!-- Secondary -->
<button class="usa-button-secondary">Secondary buttons</button>
<button class="usa-button-secondary usa-button-active">Active</button>
<button class="usa-button-secondary usa-button-hover">Hover</button>
<!-- Outline -->
<button class="usa-button-outline">Outline buttons</button>
<button class="usa-button-outline usa-button-active">Active</button>
<button class="usa-button-outline usa-button-hover">Hover</button>
<!-- Focus -->
<button class="usa-button-focus">Button focus</button>
<button class="usa-button-focus usa-button-active">Active</button>
<button class="usa-button-focus usa-button-hover">Hover</button>
<!-- Disabled -->
<button class="usa-button-disabled">Disabled button</button>
<!-- Big -->
<button class="usa-button-big">Big button</button>
<button class="{{ classes }}">{{ label }}</button>
{% if (category != 'disabled') and (category != 'big') %}
<button class="{{ classes }} usa-button-active">Active</button>
<button class="{{ classes }} usa-button-hover">Hover</button>
{% endif %}
/* Primary */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: primary
label: Primary buttons
classes: usa-button
/* Primary Alt */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: primary
label: Primary alt buttons
classes: usa-button-primary-alt
/* Secondary */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: secondary
label: Secondary buttons
classes: usa-button-secondary
/* Outline */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: secondary
label: Outline buttons
classes: usa-button-outline
/* Focus */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: focus
label: Button focus
classes: usa-button-focus
/* Disabled */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: disabled
label: Disabled button
classes: usa-button-disabled
/* Big */
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
category: big
label: Big button
classes: usa-button-big