User interface (UI) guidelines

Learn about using Canva elements in your product.

This article provides guidelines on how to integrate Canva elements, such as buttons, into your product interface.

Connecting to Canva

Button types

Use Canva-branded buttons when activating Canva-specific experiences or content from your product. The following examples demonstrate buttons for some common use cases.

Do

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> DO use this button for user authentication, when the connection will be sustained. </> } />

<Card border={false} description={ <> DO use other action button examples. </> } /> </Grid>

Button guidelines

We recommend using Canva-branded buttons when activating Canva-specific experiences or content from your product. It's acceptable to use text for an action button, without the Canva logo. The following examples demonstrate how to use buttons for some common use cases.

Do

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> DO use the Canva icon inside buttons, with at least 8px margin on all sides. </> } />

<Card border={false} description={ <> DO use alternative buttons without the Canva logo, if needed. </> } />

<Card border={false} description={ <> DO display the Canva button at least as prominently as other third-party options. </> } /> </Grid>

Don't

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> DON'T use the Canva script logo inside buttons. </> } />

<Card border={false} description={ <> DON'T use the Canva icon by itself for a user action. It should be accompanied by text clearly indicating the action that will be taken. </> } />

<Card border={false} description={ <> DON'T use the Canva script logo by itself on a button. It should be accompanied by text clearly indicating the action that will be taken. </> } /> </Grid>

User interface (UI) guidelines ​

Connecting to Canva ​

Button types ​

Do ​

Button guidelines ​