---
title: "Button Block"
description: "A Template reference of how the template is structured. This is useful information for building a custom block or editing templates in code."
url: https://docs.topol.io/email-editor/template-reference/blocks/button.html
---

# Topol Button Block

**The button block renders an `mj-button`**: a styled, linkable call-to-action with its label in `content`.

```ts
interface TopolButtonBlock extends TopolBlock {
  tagName: "mj-button";
  attributes: {
    align: string;
    "background-color": string;
    color: string;
    "border-radius": string;
    "font-size": string;
    padding: string;
    "inner-padding": string;
    href: string;
    "font-family": string;
    containerWidth: number;
    width?: number;
    border?: string;
    "line-height"?: string | number;
    "css-class"?: "hide_on_mobile" | "hide_on_desktop";
  };
  content: string;
}
```