Basics of Component variants
Component Variants
Component Variants are different versions or states of the same UI component.
Instead of creating separate components for every style, one reusable component supports multiple variations.
Simple Meaning
One button component can have:
- Primary
- Secondary
- Outline
- Danger
- Disabled
- Loading
These are called variants.
Why Variants Are Important?
- Reusable UI
- Consistent design
- Cleaner frontend architecture
- Less duplicate code
- Easy maintenance
- Scalable design systems
Without Variants
Developers may create multiple separate components.
[code theme="dark"]
PrimaryButton
SecondaryButton
DangerButton
[/code]
This becomes difficult to maintain.
With Variants
One reusable component handles everything.
[code theme="dark"]
[/code]
Real World Example
Most modern UI libraries use variants:
- MUI
- ShadCN UI
- Ant Design
- Chakra UI
- Bootstrap
Button Variant Example
imagessssss
React Variant Example
[code theme="dark"]
function Button({variant,text}){
return(
);
}
[/code]
Using Variants
[code theme="dark"]
[/code]
SCSS Variant Example
[code theme="dark"]
.button{
padding:12px 20px;
border-radius:8px;
&.primary{
background:blue;
color:white;
}
&.danger{
background:red;
color:white;
}
}
[/code]
Tailwind Variant Example
[code theme="dark"]
[/code]
Modern Variant Libraries
Modern React projects often use:
[code theme="dark"]
class-variance-authority (CVA)
[/code]
Example
[code theme="dark"]
variant="primary"
size="lg"
[/code]
Types of Variants
- Style Variants
- Size Variants
- State Variants
- Theme Variants
1. Style Variants
Different visual appearances.
Examples
[code theme="dark"]
Primary
Secondary
Outline
Ghost
Danger
[/code]
2. Size Variants
Different component sizes.
Examples
[code theme="dark"]
Small
Medium
Large
[/code]
React Example
[code theme="dark"]
[/code]
3. State Variants
Different UI states.
Examples
- Hover
- Active
- Disabled
- Loading
- Focused
Loading Button Example
[code theme="dark"]
[/code]
Disabled Example
[code theme="dark"]
[/code]
4. Theme Variants
Different themes.
Examples
[code theme="dark"]
Light
Dark
Brand Themes
[/code]
Figma Component Variants
Figma supports variants directly inside components.
Example
[code theme="dark"]
Button
Variant:
Primary
Secondary
Outline
[/code]
Figma Variant Example
Imagesss
Why Figma Variants Are Useful?
- Reusable components
- Easy design updates
- Consistent UI
- Developer-friendly handoff
Variant Properties
Variants can combine multiple properties.
Example
[code theme="dark"]
Variant → Primary
Size → Large
State → Disabled
[/code]
Result
One component supports many combinations.
Real Frontend Example
[code theme="dark"]
[/code]
Why Large Projects Need Variants?
- Reusable architecture
- Scalable UI systems
- Cleaner components
- Easy maintenance
Common Components Using Variants
- Buttons
- Cards
- Inputs
- Alerts
- Badges
- Modals
- Tabs
Badge Variant Example
imagesssss
Benefits for Frontend Developers
- Cleaner React components
- Less duplicate CSS
- Better scalability
- Easy theme handling
- Consistent UI behavior
Common Problems Without Variants
- Duplicate components
- Inconsistent UI
- Large CSS files
- Difficult maintenance
AI Generated UI Problems
AI-generated components often:
- Create duplicate buttons
- Ignore reusable architecture
- Use inconsistent styling
- Miss proper state handling
Best Practices
- Create reusable components
- Use semantic variant names
- Keep variants scalable
- Support responsive behavior
- Maintain consistent design tokens
Good Variant Naming
[code theme="dark"]
primary
secondary
danger
outline
[/code]
Bad Naming
[code theme="dark"]
blueButton
redButton
bigButton
[/code]
Quick Summary
- Component Variants create multiple versions of one component
- Improve reusable architecture
- Reduce duplicate UI code
- Very important in modern design systems
- Widely used in React and Figma systems
Component variants are one of the foundations of scalable UI and design system architecture.