Skip to main content
Back to Style Guide
Buttons
Button components in multiple variants and sizes using FindborgUI classes.
Button Sizes
Size Comparison
Small (32px)
button-sm
Medium (40px)
button-md (default)
Large (48px)
button-lg
Note:
The base .button class defaults to medium size (40px). Add -sm or -lg modifiers for different sizes.
Primary Buttons
Small
Medium
Large
Classes: button button-primary button-sm | button-md | button-lg
Secondary Buttons
Cancel
Cancel
Cancel
Classes: button button-secondary button-md
Outline Buttons
Outline
Outline
Outline
Classes: button button-outline button-md
Ghost Buttons
Ghost
Ghost
Ghost
Classes: button button-ghost button-md
Text Buttons
Text Small
Text Medium
Text Large
Classes: button button-text button-md
Icon Buttons
Classes: fui-icon-btn fui-icon-btn--md fui-icon-btn--primary
States
Disabled State
Primary Disabled
Secondary Disabled
Outline Disabled
Note:
Disabled buttons have 50% opacity and cursor: not-allowed
✕