Button

1. Primary Button

Used for the main or most important actions on a page or in a form.

• • Style: filled with a dark primary color
• • Text: light for strong contrast
• • Typical use: submitting forms, confirming actions

2. Secondary Button

Used for supporting or less prominent actions.

• • Style: filled with a light gray color
• • Text: dark
• • Typical use: alternative actions, navigation

3. Tertiary Button

Used for lower-priority or contextual actions.

• • Style: outlined with a dark stroke, transparent background
• • Text: dark color
• • Typical use: secondary actions where visual emphasis should be minimal

4. Negative Button

Used for destructive or irreversible actions (e.g., delete, remove).

• • Style: filled with a red color
• • Text: white
• • Typical use: deleting data, canceling critical actions

5. Hot Deal Button

Used for promotional or highlighted actions that need extra attention.

• • Style: filled with an accent gradient color
• • Text: white
• • Typical use: special offers, featured actions, limited-time deals

6. Ghost Button

Used when minimal visual weight is desired.

• • Style: text-only, no border
• • On hover: filled with a light gray background
• • Typical use: secondary navigation, less critical actions

7. CTA Button

Call-to-action button with animated icon background that expands on hover.

Primary - Icon Only

Secondary - Icon Only

Tertiary - Icon Only

Negative - Icon Only

Hot - Icon Only

Ghost - Icon Only