Button

Kids Dentistry

KDDT 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 → KD Brand Buttons): Poppins Bold 16, full pill radius, 2px stroke, 12×24 padding, 40px height.

Style	CTA style ID	Behavior
Primary	`to confirm`	Solid yellow 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: #FFE856
Text Color: #444444
Stroke: #FFE856 · 2px
Font: Poppins 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

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

Focus

Large Button

Background: #FFE856
Text Color: #444444
Stroke: #FFD505 · 2px
Font: Poppins 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Disabled

Large Button

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

Secondary

Default

Large Button

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

Hover

Large Button

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

Focus

Large Button

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

Disabled

Large Button

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

Tertiary

Default

Large Button →

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

Hover

Large Button →

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

Focus

Large Button →

Background: transparent
Text Color: #008FCC
Stroke: #005581 · 2px
Font: Poppins 16
Text Style: Bold
Letter Spacing: 0px
Padding: 12px 12px
Corner Radius: Full (pill)

Disabled

Large Button →

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

Inverse — Dark Surfaces

Primary Inverse

Default

Large Button

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

Hover

Large Button

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

Focus

Large Button

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

Disabled

Large Button

Background: #CBCBCB
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Bold
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: Bold
Letter Spacing: 0px
Padding: 12px 24px
Corner Radius: Full (pill)

Hover

Large Button

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

Focus

Large Button

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

Disabled

Large Button

Background: transparent
Text Color: #6F6F6F
Stroke: #CBCBCB · 2px
Font: Poppins 16
Text Style: Bold
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: Bold
Letter Spacing: 0px
Padding: 0px 0px
Corner Radius: Full (pill)

Hover

Large Button →

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

Focus

Large Button →

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

Disabled

Large Button →

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

Source & authoring: All values exported live from Figma O2 → Brand Examples → KD Brand Buttons (node 780:1482). Production buttons use the Pacific Dental Button component — the Kids 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.