Button & Link Components

Interactive components for creating clickable elements in your emails.

Button

A call-to-action button with automatic MSO (Microsoft Outlook) support for consistent rendering across email clients.

Props

href

string

default:"#"

The URL the button links to

target

string

default:"_blank"

Link target attribute

number

default:"0"

Horizontal padding in pixels (left and right)

number

default:"0"

Vertical padding in pixels (top and bottom)

style

string

Inline CSS styles

class

string

Tailwind CSS classes or custom CSS classes

children

snippet

required

Button text content

All standard HTML anchor attributes are supported via HTMLAnchorAttributes.

Features

MSO Support: Automatically includes conditional comments for Outlook compatibility
Padding Props: Use pX and pY for precise padding that works in Outlook
Display: Renders as inline-block for proper sizing
Text Decoration: None by default for clean appearance

Usage

<Button 
  href="https://example.com/action"
  class="rounded bg-blue-600 px-6 py-3 text-white"
>
  Click Me
</Button>

Basic Button
Styled Buttons
With Padding Props
Real Examples

<Button 
  href="https://example.com"
  class="bg-blue-600 text-white"
  pX={20}
  pY={12}
>
  Get Started
</Button>

<!-- Primary Button -->
<Button 
  href="https://example.com/signup"
  class="rounded bg-blue-600 px-6 py-3 text-base font-semibold text-white"
>
  Sign Up Now
</Button>

<!-- Secondary Button -->
<Button 
  href="https://example.com/learn-more"
  class="rounded border-2 border-gray-300 bg-white px-6 py-3 text-gray-700"
>
  Learn More
</Button>

<!-- Success Button -->
<Button 
  href="https://example.com/confirm"
  class="rounded bg-green-600 px-5 py-2 text-white"
>
  Confirm Order
</Button>

<!-- Using pX and pY for Outlook compatibility -->
<Button 
  href="https://example.com"
  pX={24}
  pY={12}
  class="rounded bg-indigo-600 text-white"
>
  Button with Pixel Padding
</Button>

<!-- Large button with more padding -->
<Button 
  href="https://example.com"
  pX={32}
  pY={16}
  class="rounded bg-purple-600 text-lg text-white"
>
  Large Button
</Button>

<!-- From Vercel invite email -->
<Section class="mb-8 mt-8 text-center">
  <Button
    class="rounded bg-black px-5 py-3 text-center text-xs font-semibold text-white"
    href="https://vercel.com/teams/invite"
  >
    Join the team
  </Button>
</Section>

<!-- Call to action -->
<Section class="text-center">
  <Button 
    href="https://example.com/offer"
    class="rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-8 py-4 text-lg font-bold text-white shadow-lg"
  >
    Claim Your 50% Discount
  </Button>
</Section>

<!-- Multiple buttons -->
<Row>
  <Column align="center">
    <Button 
      href="https://example.com/accept"
      class="mr-2 rounded bg-green-600 px-6 py-3 text-white"
    >
      Accept
    </Button>
  </Column>
  <Column align="center">
    <Button 
      href="https://example.com/decline"
      class="ml-2 rounded bg-gray-400 px-6 py-3 text-white"
    >
      Decline
    </Button>
  </Column>
</Row>

Link

A styled hyperlink for inline text links and secondary actions.

Props

href

string

required

The URL to link to

target

string

default:"_blank"

Link target attribute

style

string

Inline CSS styles (merged with defaults)

class

string

Tailwind CSS classes or custom CSS classes

children

snippet

required

Link text content

All standard HTML anchor attributes are supported via HTMLAnchorAttributes.

Default Styles

text-decoration-line: none - No underline by default
color: #067df7 - Blue link color

Usage

<Link href="https://example.com" class="text-blue-600">
  Click here
</Link>

Basic Links
Styled Links
Email & Phone Links
Real Examples

<Text>
  Visit our <Link href="https://example.com">website</Link> for more information.
</Text>

<Link href="https://example.com/privacy" class="text-sm text-gray-600">
  Privacy Policy
</Link>

<!-- Blue underlined link -->
<Link 
  href="https://example.com" 
  class="text-blue-600 underline"
>
  Learn More
</Link>

<!-- Custom color link -->
<Link 
  href="https://example.com/help" 
  class="text-purple-600 hover:text-purple-800"
>
  Get Help
</Link>

<!-- Subtle link -->
<Link 
  href="https://example.com/terms" 
  class="text-xs text-gray-500"
>
  Terms and Conditions
</Link>

<!-- Email link -->
<Link 
  href="mailto:[email protected]"
  class="text-blue-600"
>
  [email protected]
</Link>

<!-- Phone link -->
<Link 
  href="tel:+1234567890"
  class="text-blue-600"
>
  +1 (234) 567-890
</Link>

<!-- From Apple receipt -->
<Text class="text-center text-sm font-medium text-gray-900">
  Save 3% on all your Apple purchases with Apple Card.
  {' '}
  <Link href="https://www.apple.com/apple-card/">
    Apply and use in minutes
  </Link>
</Text>

<!-- Footer links -->
<Text class="text-center text-xs text-gray-600">
  <Link href="https://example.com/account" class="text-blue-600">
    Account Settings
  </Link>
  {' • '}
  <Link href="https://example.com/terms" class="text-blue-600">
    Terms of Sale
  </Link>
  {' • '}
  <Link href="https://example.com/privacy" class="text-blue-600">
    Privacy Policy
  </Link>
</Text>

<!-- Inline link in paragraph -->
<Text class="text-sm text-black">
  <strong>Alan Turing</strong> (
  <Link href="mailto:[email protected]" class="text-blue-600">
    [email protected]
  </Link>
  ) has invited you to join the team.
</Text>

Button vs Link

When to use each component:

Use Button For
Use Link For

Primary calls-to-action
Important actions (Sign Up, Buy Now, Confirm)
Standalone clickable elements
Actions that need visual prominence

<Section class="text-center">
  <Button 
    href="https://example.com/checkout"
    class="rounded bg-green-600 px-8 py-4 text-white"
  >
    Complete Purchase
  </Button>
</Section>

Inline text links
Secondary actions
Footer links
Email/phone links
Navigation within content

<Text>
  Need help? <Link href="https://example.com/support">Contact support</Link>
  or view our <Link href="https://example.com/faq">FAQ</Link>.
</Text>

Complete Example

<script lang="ts">
  import {
    Html,
    Head,
    Body,
    Container,
    Section,
    Heading,
    Text,
    Button,
    Link,
    Hr
  } from 'better-svelte-email';
</script>

<Html>
  <Head />
  <Body class="bg-gray-50 font-sans">
    <Container class="mx-auto my-10 rounded bg-white p-8 shadow-lg">
      <!-- Header -->
      <Section class="mb-8">
        <Heading as="h1" class="text-center text-3xl font-bold text-gray-900">
          Welcome to Our Service!
        </Heading>
      </Section>

      <!-- Main content -->
      <Section class="mb-8">
        <Text class="text-gray-700">
          We're excited to have you on board. Click the button below to
          get started with your account setup.
        </Text>
      </Section>

      <!-- Primary CTA -->
      <Section class="mb-8 text-center">
        <Button 
          href="https://example.com/setup"
          class="rounded bg-blue-600 px-8 py-4 text-lg font-semibold text-white"
        >
          Complete Setup
        </Button>
      </Section>

      <!-- Alternative action -->
      <Section class="mb-6">
        <Text class="text-center text-sm text-gray-600">
          or <Link href="https://example.com/learn-more">learn more about our features</Link>
        </Text>
      </Section>

      <Hr class="my-6" />

      <!-- Footer links -->
      <Section>
        <Text class="text-center text-xs text-gray-500">
          <Link href="https://example.com/help" class="text-gray-600">
            Help Center
          </Link>
          {' • '}
          <Link href="https://example.com/privacy" class="text-gray-600">
            Privacy Policy
          </Link>
          {' • '}
          <Link href="mailto:[email protected]" class="text-gray-600">
            Contact Support
          </Link>
        </Text>
      </Section>
    </Container>
  </Body>
</Html>

Best Practices

Use the pX and pY props on Button for precise padding control that works reliably in Outlook.

Always provide an href attribute for buttons and links. Using # as a placeholder is acceptable for testing.

The Button component automatically includes MSO conditional comments for Outlook compatibility. No additional configuration needed.

For the best user experience, make button text clear and action-oriented (“Get Started”, “Download Now”, “Confirm Order”).

Avoid using target="_self" on buttons/links in emails, as it can cause navigation issues in webmail clients. Stick with the default _blank.

When using Link inside Text components, the link will inherit the text color unless you override it with a class.

Get Started

Core Concepts

Components

Guides

Migration

Button

Props

Features

Usage

Link

Props

Default Styles

Usage

Button vs Link

Complete Example

Best Practices

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Guides

Migration

​Button

​Props

​Features

​Usage

​Link

​Props

​Default Styles

​Usage

​Button vs Link

​Complete Example

​Best Practices

Build docs developers (and LLMs) love

Button

Props

Features

Usage

Link

Props

Default Styles

Usage

Button vs Link

Complete Example

Best Practices