Primary
{{ include( 'components/button.twig', {
slot: "View Programs"
href: "/programs/"
variant: "filled"
} ) }}Button
Table of Contents
Anatomy
- Label
Default buttons are styled to work on light backgrounds while maintaining a high enough contrast ratio, while the inverse buttons are used when a button needs to be placed over a dark background.
Usage Guidelines
There are three main button variants:
| Variant | Prominence | Description | Main Usage |
|---|---|---|---|
| default/Tertiary | Low | No border or fill, simply text with spacing around it to match other button variations | Other minor text-based CTAs |
| Outlined/Secondary | Medium | Border is set around the button, but it has no fill color | Most button-derived CTAs |
| Filled/Primary | High | Fill color and an alternate text color | Used to launch RFI |
WordPress
This component can be added to post content with the Button block in the Gutenberg editor.
Specifications
Properties
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| label | string | Button text | Yes | - |
| is_link | boolean | Set to true to use an `a` tag | No | - |
| url | string | - | No | - |
| style | string | 'secondary' or 'tertiary'. False by default, making button primary | No | false |
| style_inverse | boolean | Deprecated, use button color utility classes when possible instead | No | - |
| dialog | string | Name of dialog to open on the page | No | - |
| id | string | - | No | - |
| class | string | list of additional classes to apply to main element. | No | - |
Styling
Modifiers
| Name | Class | Description |
|---|---|---|
| Secondary | .tux-c-button--secondary | Outline-style button for medium prominence |
| Tertiary | .tux-c-button--tertiary | transparent button for low prominence |
| Narrow | .tux-c-button--narrow | decreases padding around label text for when space is limited |
Colors
| Name | Application | Custom Property | Roles | Default Opacity | Description |
|---|---|---|---|---|---|
| main-color | mixed | --tux-comp-button--color | primary, on-background | - | - |
| main-color-hover | background | - | self:main-color | 0.1 | Tint applied to background when button is hovered |
| filled-color | background | --tux-comp-button--filled--color | self:main-color | - | - |
| filled-on-color | text | --tux-comp-button--filled--color | on-primary | - | - |
| filled-color-hover | background | - | self:filled-on-color | 0.15 | Tint applied to background when button is hovered when using 'filled' button variation |
Changelog
1.32.0 (2022-04-26)
- fix: apply margin in iOS <=14.5 to space icon (3ea7da4)
- feat: support custom colors via utility classes (#240) (ecb0061)
1.15.0 (2021-01-25)
1.0.0
- button added
Related
Contained In
Other components that use this component (not including freeform content slots).
- Feedback
- Filter List
- Financial Calculator
- Menu
- Program Compare Table
- Programmatic Facts
- Related Topic
- Spotlight CTA
- Summary
Examples
Secondary
{{ include( 'components/button.twig', {
slot: "View Programs"
href: "/programs/"
variant: "outlined"
} ) }}Tertiary
{{ include( 'components/button.twig', {
label: "View Scholarships"
is_link: true
url: "/external-url/"
target: "_blank"
style: "tertiary"
} ) }}Primary Inverse
{{ include( 'components/button.twig', {
label: "View Programs"
is_link: true
url: "/programs/"
style_inverse: true
} ) }}Secondary Inverse
{{ include( 'components/button.twig', {
label: "View Programs"
is_link: true
url: "/programs/"
style: "secondary"
style_inverse: true
} ) }}Tertiary Inverse
{{ include( 'components/button.twig', {
label: "View Scholarships"
is_link: true
url: "/external-url/"
target: "_blank"
style: "tertiary"
style_inverse: true
} ) }}Collection
<ul class="tux-c-action-list u-p2">
<li>
<x-button href="#" variant="filled">{{ fa_icon('solid/lamp-desk') }} Icon Label</x-button>
</li>
<li>
<x-button href="#" variant="filled">Button Label</x-button>
</li>
<li>
<x-button href="#" variant="outlined">{{ fa_icon('solid/gift') }} Icon Label</x-button>
</li>
<li>
<x-button href="#" variant="outlined">Button Label</x-button>
</li>
<li>
<x-button href="#">Button Label</x-button>
</li>
<li>
<x-button href="#">Icon Label {{ fa_icon('solid/arrow-right') }}</x-button>
</li>
</ul>
<ul class="tux-c-action-list u-bg--black u-p2">
<li>
<x-button href="#" variant="filled">{{ fa_icon('solid/book') }} Icon Label</x-button>
</li>
<li>
<x-button href="#" variant="filled">Button Label</x-button>
</li>
<li>
<x-button href="#" variant="outlined">{{ fa_icon('solid/comment-alt-smile') }} Icon Label</x-button>
</li>
<li>
<x-button href="#" variant="outlined">Button Label</x-button>
</li>
<li>
<x-button href="#">Button Label</x-button>
</li>
<li>
<x-button href="#">Icon Label {{ fa_icon('solid/arrow-right') }}</x-button>
</li>
</ul>