Button

General Dentistry

GNDT 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 (Brand Examples → GP Brand Buttons): Poppins SemiBold 16, full pill radius, 2px stroke, 12×24 padding, 40px height.

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

Primary

Default

Large Button

Background: #006A74
Text Color: #FFFFFF
Stroke: #006A74 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: #09B4C5
Text Color: #FFFFFF
Stroke: #09B4C5 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: #006A74
Text Color: #FFFFFF
Stroke: #09B4C5 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: #C0BEBA
Text Color: #848380
Stroke: #C0BEBA · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Secondary

Default

Large Button

Background: transparent
Text Color: #006A74
Stroke: #006A74 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: transparent
Text Color: #09B4C5
Stroke: #09B4C5 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: transparent
Text Color: #006A74
Stroke: #09B4C5 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: transparent
Text Color: #848380
Stroke: #C0BEBA · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Tertiary

Default

Large Button →

Background: transparent
Text Color: #006A74
Stroke: none
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Hover

Large Button →

Background: transparent
Text Color: #09B4C5
Stroke: none
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Focus

Large Button →

Background: transparent
Text Color: #09B4C5
Stroke: #09B4C5 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 12px
Corner Radius: Full (pill)

Disabled

Large Button →

Background: transparent
Text Color: #848380
Stroke: none
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Inverse — Dark Surfaces

Primary Inverse

Default

Large Button

Background: #FFFFFF
Text Color: #006A74
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: #FFFFFF
Text Color: #09B4C5
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: #FFFFFF
Text Color: #006A74
Stroke: #09B4C5 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: #C0BEBA
Text Color: #848380
Stroke: #C0BEBA · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Secondary Inverse

Default

Large Button

Background: transparent
Text Color: #FFFFFF
Stroke: #FFFFFF · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

Background: transparent
Text Color: #6DD7E2
Stroke: #6DD7E2 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Focus

Large Button

Background: transparent
Text Color: #FFFFFF
Stroke: #6DD7E2 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

Background: transparent
Text Color: #848380
Stroke: #C0BEBA · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Tertiary Inverse

Default

Large Button →

Background: transparent
Text Color: #FFFFFF
Stroke: none
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Hover

Large Button →

Background: transparent
Text Color: #A7E6EC
Stroke: none
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Focus

Large Button →

Background: transparent
Text Color: #FFFFFF
Stroke: #6DD7E2 · 2px
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 12px 12px
Corner Radius: Full (pill)

Disabled

Large Button →

Background: transparent
Text Color: #848380
Stroke: none
Font: Poppins 16
Text Style: SemiBold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Source & authoring: All values exported live from Figma O2 → Brand Examples → GP Brand Buttons (node 780:1481). Production buttons use the Pacific Dental Button component — the General Dentistry CTA style IDs still need to be confirmed and added to the table above. Inverse variants apply on dark surface backgrounds; the dark panel colour shown here is a documentation choice, not a Figma token.