Button

Special Needs Dentistry

SNDT Buttons

Buttons communicate the primary action on a page — use one primary button per view, with secondary and tertiary for less prominent actions. Special Needs Dentistry inherits its button CSS from Kids Dentistry, so the values below are the KD set: 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: Special Needs Dentistry uses the Kids Dentistry button CSS, so every value on this page is the KD set exported from Figma O2 → Brand Examples → KD Brand Buttons (node 780:1482). There is no separate SNDT button frame in Figma, and none is expected — the shared CSS is intentional. Production buttons use the Pacific Dental Button component; the CTA style IDs still need to be confirmed and added to the table above. The dark panel colour behind the inverse examples is a documentation choice, not a Figma token.