Buttons

Use tokens in code

<button className="tpz-btn-sty">Primary action</button>

<button className="tpz-btn-sty tpz-btn-shd tpz-btn-fnt-sz-main">
  Primary action
</button>

<button style={{ borderRadius: "var(--tpz-button-border-radius)", fontSize: "var(--tpz-button-font-size-base)" }}>
  Primary action
</button>

const buttonStyle = {
  borderRadius: "var(--tpz-button-border-radius)",
  fontSize: "var(--tpz-button-font-size-base)",
  fontWeight: "var(--tpz-button-font-weight)",
};

<button style={buttonStyle}>Primary action</button>

Change token values using the Engine

Every project has its own Tokens Engine. Changes are saved to draft automatically and take effect instantly. Use Publish Live to display the changes in the deployed site.
Read more about the engine

Change token values using the Editor

In the editor, open the Buttons panel to set button font size and weight, border radius and shadow. You can set a border radius value for all buttons across your entire project by simply selecting it and clicking Publish. Read more about the editors here:Live Editor|Local Editor

Full button tokens