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 values in engine

From your /dashboard on tapuz.io, open any project and click Manage tokens to launch the tapuz engine. Changes are saved automatically and take effect instantly. Undo/redo is available throughout the session, and the editor stays in sync in real time.

Change values via editor

Open the editor locally from any project page by typing /?tapuz-edit OR via the project slot in your /dashboard in tapuz.io and go to the Buttons tab. Change any values and watch the preview in real time. You can undo/redo any change. When you are ready, click Save to make your changes permanent. For online editing read here.

Full button tokens