Component: Button

Purpose

Creates a clickable button, typically used for links or calls to action.

When to Use

• Linking to other pages on your site (e.g., "Learn More", "Contact Us").
• Linking to external websites.
• Highlighting the main action within a CallToAction component.
• Creating eye-catching call-to-action elements in your content.

How to Use (Options / Props)

You add options (called "props") inside the opening tag <Button ... >. The text you want inside the button goes between the opening <Button> and closing </Button> tags.

Example MDX Usage

Simple Primary Button:

<Button href="/features">See Features</Button>

Secondary Button Linking Externally:

<Button href="https://example.com" variant="secondary">Visit Example.com</Button>

Outlined Button (smaller size):

<Button href="/pricing" variant="outline" size="sm">View Pricing</Button>

Large Call-to-Action Button:

<Button href="/signup" size="lg">Get Started Today</Button>

Ghost Button (subtle style):

<Button href="/docs" variant="ghost">Read Documentation</Button>

Link-styled Button (looks like a link, acts like a button):

<Button href="/terms" variant="link">Terms & Conditions</Button>

Button inside paragraph text:

Read our latest blog post or <Button href="/contact">Contact Us</Button> today!

Button Variants Explained

• primary: Bold, primary action button with filled background (default)
• secondary: Softer style for secondary actions
• outline: Button with border, transparent background
• ghost: Minimal style, shows background only on hover
• link: Styled like a text link but with button behavior
• destructive: Red style for dangerous actions (use sparingly)

Button Sizes

• default: Standard button size (good for most uses)
• sm: Smaller, compact button
• lg: Larger, more prominent button
• icon: Square button for icon-only content

Updated on: 13/05/2026