Skip to content

## Button ​

A JSX email component which styles an anchor element to appear as a button

TIP

Semantics: Quite often in the email world we talk about buttons when we actually mean links. Behind the scenes this component is a `<a>` element which is styled like a `<button>` element.

## Install ​

Install the component from your command line

pnpmbunnpmyarn
console

    pnpm add jsx-email

    pnpm add jsx-email

console

    bun add jsx-email

    bun add jsx-email

console

    npm add jsx-email

    npm add jsx-email

console

    yarn add jsx-email

    yarn add jsx-email

## Usage ​

Add the component to your email template. Include styles where needed.

jsx

    import { Button } from 'jsx-email';

    const Email = () => {
      return (
        <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px' }}>
          Click me
        </Button>
      );
    };

    import { Button } from 'jsx-email';

    const Email = () => {
      return (
        <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px' }}>
          Click me
        </Button>
      );
    };

## Component Props ​

ts

    href: string;

    href: string;

The url to navigate to when the button is clicked.

ts

    target?: string;

    target?: string;

Specifies the value of the `"target"` attribute for the button `target`.

TIP

This component also expresses all of the Common Component Props for `ComponentProps<'a'>`.