Element 4

Button

An interactive button element with multiple states, variants, and customizable styling. Buttons are used to trigger actions and navigate within the interface.

Overview

The Button element is one of the most fundamental interactive elements in Brand. It supports multiple visual states (normal, hover, active, disabled), can contain text and/or icons, and adapts to the current brand theme.

Live Preview

Code

1<button class="btn btn-primary">
2  Primary Button
3</button>
4
5<button class="btn btn-secondary">
6  Secondary Button
7</button>
8
9<button class="btn btn-primary" disabled>
10  Disabled
11</button>

Brand Properties

The following table shows all CRAFT Button properties with their default values and how they map to brand-specific values.

Property	Type	Brand Default	HoB Value	TAE Value
Font	Dropdown	`Open Sans`	`Open Sans`	`Open Sans`
Weight	Dropdown	`normal (400)`	`normal (400)`	`bold (700)`
Size	Dropdown	`14px`	`14px`	`20px`
Text Alignment	4 options	`center`	`center`	`center`
Button Alignment	3 options	`center`	`center`	`center`
Line Height	Slider	`Auto`	`Auto`	`Auto`
Letter Spacing	Slider	`0px`	`0.5px`	`0`
Text Case	2 options	`none`	`uppercase`	`none`
Margins	Input (px)	`0`	`0`	`0`
Padding Top/Bottom	Input (px)	`12`	`14`	`16`
Padding Left/Right	Input (px)	`6`	`28`	`20`
Corner Radius	Input (px)	`0`	`9999`	`9999`
Background Color	Color picker (hex)	`#038012`	`#038012`	`#1A5129`
Border Style	Dropdown	`none`	`none`	`none`
Border Width	Input	`0px`	`0px`	`0px`
Border Color	Color picker	`rgb(0,0,0)`	`rgb(0,0,0)`	`rgb(0,0,0)`
Opacity	Slider	`100%`	`100%`	`100%`
Shadow	Toggle	`Off`	`Off`	`Off`
Hover Background	Color picker (hex)	`#195129`	`#195129`	`#5F982F`
Hover Border Color	Color picker	`rgb(255,255,255)`	`rgb(255,255,255)`	`rgb(255,255,255)`
Hover Content Color	Color picker	`rgb(255,255,255)`	`#FFFFFF`	`#FFFFFF`
Action	Dropdown	`Select action`	`-`	`-`

Action Options

The Action dropdown provides the following options:

Select action - Default placeholder (no action)
Go to URL - Navigate to a specified URL
Go to Section - Scroll to a section on the page
Trigger event - Trigger a custom JavaScript event

Variants

Sizes

Styles

Full Width

Accessibility

Use semantic <button> element for actions
Use <a> element styled as button for navigation
Ensure minimum touch target of 44x44 pixels on mobile
Provide focus states for keyboard navigation
Use aria-disabled for disabled state accessibility
Ensure 4.5:1 color contrast ratio for text

Do's and Don'ts

Do

Use clear, action-oriented labels
Maintain consistent button styling across pages
Provide visual feedback on interaction
Use primary buttons sparingly for main CTAs

Don't

Use vague labels like "Click here"
Use too many primary buttons on one page
Make buttons look like regular text
Disable buttons without explanation

Unmapped Brand Values

The following brand-specific values are not directly mappable to CRAFT Button properties and may require custom implementation or CSS overrides.

HoB Unmapped Values

Property	Value	Notes
Primary Button Text Color	`#FFFFFF`	CRAFT uses Hover Content Color; need explicit text color property
Secondary Button Background	`transparent`	Requires separate secondary button configuration
Secondary Button Text	`#038012`	Requires separate secondary button configuration
Secondary Button Border	`1px solid #038012`	Requires separate secondary button configuration

TAE Unmapped Values

Property	Value	Notes
Primary Button Text Color	`#FFFFFF`	CRAFT uses Hover Content Color; need explicit text color property
Secondary Button Background	`transparent`	Requires separate secondary button configuration
Secondary Button Text	`#1A5129`	Requires separate secondary button configuration
Secondary Button Border	`1px solid #1A5129`	Requires separate secondary button configuration

Related Components

Button Components - Composed button layouts
Icon Element - For icon buttons
Material Actions - FAB, Icon Button