Button

Component

Buttons

Buttons communicate the primary action on a page — use one primary button per view, with secondary and tertiary for less prominent actions. All values below are pulled from the Figma O2 Design System (CTAs → PDS Health Button Callout): Poppins Medium 16, 4px radius, 2px stroke, 12×24 padding, 40px height.

Style	CTA style ID	Behavior
Primary	`1692004788095`	Solid navy fill — one per view, the main action
Secondary	`1693480894909`	Outlined — supporting actions
Tertiary	`1751993183815`	Text link with arrow — low-emphasis actions
Inverse	`—`	All three styles on dark surface backgrounds

Primary

Default

Schedule Now

Background: #00476C
Text Color: #FFFFFF
Stroke: #00476C · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Schedule Now

Background: #00A9EB
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Schedule Now

Background: #00476C
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Schedule Now

Background: #CBCBCB
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Secondary

Default

Learn More

Background: transparent
Text Color: #00476C
Stroke: #00476C · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Learn More

Background: #00A9EB
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Learn More

Background: transparent
Text Color: #00476C
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Learn More

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Tertiary

Default

View Services

Background: none
Text Color: #006EA1
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 0
Corner Radius: 0
Arrow: icomoon \\e928

Hover

View Services

Background: none
Text Color: #00A9EB
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 0

Focus

View Services

Background: none
Text Color: #006EA1
Stroke: #00A9EB · 2px
Corner Radius: 4px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px

Disabled

View Services

Background: none
Text Color: #6F6F6F
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 0

Inverse — Dark Surfaces

Primary Inverse

Default

Schedule Now

Background: #FFFFFF
Text Color: #00476C
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Schedule Now

Background: #00A9EB
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Schedule Now

Background: #FFFFFF
Text Color: #00476C
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Schedule Now

Background: #CBCBCB
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Secondary Inverse

Default

Learn More

Background: transparent
Text Color: #FFFFFF
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Hover

Learn More

Background: #00A9EB
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Focus

Learn More

Background: transparent
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Disabled

Learn More

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: 4px

Tertiary Inverse

Default

View Services

Background: none
Text Color: #FFFFFF
Stroke: none
Arrow: icomoon \\e928
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 0
Corner Radius: 0

Hover

View Services

Background: none
Text Color: #00A9EB
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 0
Corner Radius: 0

Focus

View Services

Background: none
Text Color: #FFFFFF
Stroke: #00A9EB · 2px
Corner Radius: 4px
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px

Disabled

View Services

Background: none
Text Color: #6F6F6F
Stroke: none
Font: Poppins 16
Text Style: Medium
Letter Spacing: 0px
Padding: 12px 0
Corner Radius: 0

Live example

Schedule Now

Hover me — interactive demo using the Figma hover values.

Source & authoring: All values exported live from Figma O2 → CTAs → PDS Health Button Callout. Production buttons use the Pacific Dental Button component — CTA styles Primary (1692004788095), Secondary (1693480894909), Tertiary (1751993183815); the tertiary arrow is icomoon codepoint \e928. Inverse variants apply on dark surface backgrounds (see Backgrounds).