import { Button } from "@/components/email/button";
import { defaultTheme } from "@/components/email/theme-default";
export function ButtonDemo() {
return (
<Button
variant="primary"
size="md"
align="center"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/button
Usage
import { Button } from "@/components/email/button";<Button variant="primary" size="md" align="center" />Examples
Buttons
primary
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeMdAlignCenterExampleDemo() {
return <Button variant="primary" size="md" align="center" />;
}primary leading icon
import { Button } from "@/components/email/button";
export function ButtonVariantPrimaryIconIconPositionLeadingExampleDemo() {
return <Button variant="primary" icon="→" iconPosition="leading" />;
}primary trailing icon
import { Button } from "@/components/email/button";
export function ButtonVariantPrimaryIconIconPositionTrailingExampleDemo() {
return <Button variant="primary" icon="→" iconPosition="trailing" />;
}secondary
import { Button } from "@/components/email/button";
export function ButtonVariantSecondaryExampleDemo() {
return <Button variant="secondary" />;
}secondary leading icon
import { Button } from "@/components/email/button";
export function ButtonVariantSecondaryIconIconPositionLeadingExampleDemo() {
return <Button variant="secondary" icon="→" iconPosition="leading" />;
}secondary trailing icon
import { Button } from "@/components/email/button";
export function ButtonVariantSecondaryIconIconPositionTrailingExampleDemo() {
return <Button variant="secondary" icon="→" iconPosition="trailing" />;
}text
import { Button } from "@/components/email/button";
export function ButtonVariantTextExampleDemo() {
return <Button variant="text" />;
}text leading icon
import { Button } from "@/components/email/button";
export function ButtonVariantTextIconIconPositionLeadingExampleDemo() {
return <Button variant="text" icon="→" iconPosition="leading" />;
}text trailing icon
import { Button } from "@/components/email/button";
export function ButtonVariantTextIconIconPositionTrailingExampleDemo() {
return <Button variant="text" icon="→" iconPosition="trailing" />;
}Button sizes
xs
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeXsExampleDemo() {
return <Button variant="primary" size="xs" />;
}sm
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeSmExampleDemo() {
return <Button variant="primary" size="sm" />;
}md
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeMdExampleDemo() {
return <Button variant="primary" size="md" />;
}lg
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeLgExampleDemo() {
return <Button variant="primary" size="lg" />;
}xl
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeXlExampleDemo() {
return <Button variant="primary" size="xl" />;
}all
import { Button } from "@/components/email/button";
export function ButtonVariantPrimarySizeAllExampleDemo() {
return <Button variant="primary" size="all" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
label | string | Variant-specific label | Configures the component's label. |
href | string | "https://example.com" | Configures the component's href. |
variant | "primary" | "secondary" | "text" | "primary" | Configures the component's variant. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "all" | "all" | Configures the component's size. |
icon | ReactNode | Built-in icon for icon variants | Configures the component's icon. |
iconPosition | "leading" | "trailing" | "leading" | Configures the component's iconposition. |
align | "left" | "center" | "right" | "center" | Configures the component's align. |