Skip to content

Button

Used for more prominent interactions or calls to action.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. WordPress
  4. Specifications
    1. Properties
    2. Styling
      1. Modifiers
      2. Custom Properties
  5. Changelog
  6. Related
    1. Contained In
  7. Examples

Anatomy

  1. 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:

VariantProminenceDescriptionMain Usage
default/TertiaryLowNo border or fill, simply text with spacing around it to match other button variationsOther minor text-based CTAs
Outlined/SecondaryMediumBorder is set around the button, but it has no fill colorMost button-derived CTAs
Filled/PrimaryHighFill color and an alternate text colorUsed to launch RFI

WordPress

This component can be added to post content with the Button block in the Gutenberg editor.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
labelstring Button text Yes-
is_linkboolean Set to true to use an `a` tag No-
urlstring - No-
stylestring 'secondary' or 'tertiary'. False by default, making button primary Nofalse
style_inversebooleanDeprecated, use button color utility classes when possible instead No-
dialogstring Name of dialog to open on the page No-
idstring - No-
classstring list of additional classes to apply to main element. No-

Styling

Modifiers

NameClassDescription
Secondary.tux-c-button--secondaryOutline-style button for medium prominence
Tertiary.tux-c-button--tertiarytransparent button for low prominence
Narrow.tux-c-button--narrowdecreases padding around label text for when space is limited

Custom Properties

NameDefaultResetsDescription
--tux-comp-button--bg#222YesUsed as the main button color. For secondary/tertiary buttons, it will be applied to the text and border.
--tux-comp-button--text#fffYesOnly used for primary buttons to provide a color with contrast to the main background color
--tux-comp-button--bg-hover#151515Yes-
--tux-comp-button--bg-active#090909Yes-
--tux-comp-button--bg-t-hoverrgba(34, 34, 34, 0.1)YesUsed for secondary and tertiary
--tux-comp-button--bg-t-activergba(34, 34, 34, 0.2)YesUsed for secondary and tertiary

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

Contained In

Other components that use this component (not including freeform content slots).

Examples

Primary 

{{ include( 'components/button.twig', {
	slot: "View Programs"
	href: "/programs/"
	variant: "filled"
} ) }}

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>