Skip to content

Creating button variant

Create a second variant of the button component to represent a secondary button style. This variant will have a different fill colour and text colour, but will still be based on the same component as the primary button.

  1. Create variant Select the main button component and right click to choose Add variant. This will create a new variant of the button component, which you can style differently. Rename the new variant to Secondary Button. and default variant to Primary Button.

    Creating a variant of the button component, showing the new variant in the right panel
  2. Style the variant.

    Adding a fill and corner radius to the button frame