Styling

CTA Button / Button Variants

Light button styling

More information on usage including a content guide and requirements is available on the individual component page:

Primary

LARGE

Default State

Hover State

Inactive State

Filled Dark Teal

Style=Fill, Color=Dark Teal, State=Default, Size=Large
Style=Fill, Color=Dark Teal, State=Hover, Size=Large
Style=Fill, Color=Wed Mid Gray, State=Deactive, Size=Large

Ghost Dark Teal

Style=Ghost, Color=Dark Teal, State=Default, Size=Large
Style=Fill, Color=Dark Teal, State=Hover, Size=Large
Style=Ghost, Color=Wed Mid Gray, State=Deactive, Size=Large

Secondary

SMALL

Default State

Hover State

Inactive State

Filled Dark Teal

Style=Fill, Color=Dark Teal, State=Default, Size=Small
Style=Fill, Color=Dark Teal, State=Hover, Size=Small
Style=Fill, Color=Wed Mid Gray, State=Deactive, Size=Small

Ghost Dark Teal

Style=Ghost, Color=Dark Teal, State=Default, Size=Small
Style=Fill, Color=Dark Teal, State=Hover, Size=Small
Style=Ghost, Color=Wed Mid Gray, State=Deactive, Size=Small

 

Dark button styling

More information on usage including a content guide and requirements is available on the individual component page:

Primary

LARGE

Default State

Hover State

Inactive State

Filled Dark Teal

Style=Fill, Color=Dark Teal, State=Default, Size=Large
Style=Fill, Color=Dark Teal, State=Hover, Size=Large
Style=Fill, Color=Wed Mid Gray, State=Deactive, Size=Large

Ghost White

Style=Ghost, Color=White, State=Default, Size=Large
Style=Fill, Color=Dark Teal, State=Hover, Size=Large
Style=Ghost, Color=Wed Mid Gray, State=Deactive, Size=Large

Secondary

SMALL

Default State

Hover State

Inactive State

Filled Dark Teal

Style=Fill, Color=Dark Teal, State=Default, Size=Small
Style=Fill, Color=Dark Teal, State=Hover, Size=Small
Style=Fill, Color=Wed Mid Gray, State=Deactive, Size=Small

Ghost White

Style=Ghost, Color=White, State=Default, Size=Small
Style=Fill, Color=Dark Teal, State=Hover, Size=Small
Style=Ghost, Color=Wed Mid Gray, State=Deactive, Size=Small