Oxygen Design System
Brands Components Foundations

Smile Generation

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

StyleCTA style IDBehavior
Primaryto confirmSolid yellow fill — one per view, the main action
Secondaryto confirmOutlined — supporting actions
Tertiaryto confirmText link with arrow — low-emphasis actions
Inverseto confirmAll 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: 4px

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: 4px

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: 4px

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: 4px

Secondary

Default

Large Button
  • Background: transparent
  • Text Color: #444444
  • Stroke: #FFE856 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 24px
  • Corner Radius: 4px

Hover

Large Button
  • Background: transparent
  • Text Color: #444444
  • Stroke: #FFD505 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 24px
  • Corner Radius: 4px

Focus

Large Button
  • Background: transparent
  • Text Color: #444444
  • Stroke: #FFD505 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 24px
  • Corner Radius: 4px

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: 4px

Tertiary

Default

Large Button →
  • Background: transparent
  • Text Color: #444444
  • Stroke: #FFE856 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Hover

Large Button →
  • Background: transparent
  • Text Color: #444444
  • Stroke: #FFD505 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Focus

Large Button →
  • Background: transparent
  • Text Color: #444444
  • Stroke: #FFD505 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Disabled

Large Button →
  • Background: transparent
  • Text Color: #6F6F6F
  • Stroke: #CBCBCB · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Inverse — Dark Surfaces

Primary Inverse

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: 4px

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: 4px

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: 4px

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: 4px

Secondary Inverse

Default

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

Hover

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

Focus

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

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: 4px

Tertiary Inverse

Default

Large Button →
  • Background: transparent
  • Text Color: #FFFFFF
  • Stroke: #FFE856 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Hover

Large Button →
  • Background: transparent
  • Text Color: #FFFFFF
  • Stroke: #FFD505 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Focus

Large Button →
  • Background: transparent
  • Text Color: #FFFFFF
  • Stroke: #FFD505 · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px

Disabled

Large Button →
  • Background: transparent
  • Text Color: #6F6F6F
  • Stroke: #CBCBCB · 2px
  • Font: Poppins 16
  • Text Style: Bold
  • Letter Spacing: 0px
  • Padding: 12px 12px
  • Corner Radius: 4px
© 2026 PDS Health — Oxygen Design System
Brands Foundations Components
Tag key
PDSH PDS Health TECH PDS Health Technologies MDGP Medical Group SGEN Smile Generation HFDN Health Foundation GNDT General Dentistry KDDT Kids Dentistry SNDT Special Needs Dentistry