Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Button component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Select the Button in the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Edit the text. If the text wraps over one line, resize the width of the button to avoid line breaks.
  4. Never add height to buttons, only resize them horizontally in width.
  5. For buttons that contain a nested icon:
    • Locate and select the Icon > Nested icon > Placeholder Icon layer in the Layers Panel.
    • Locate the Design tab in the Inspector Panel.
    • Under the Instance section, click the icon name to expand the menu.
    • Choose a new icon.

API

PropertyTypeRequiredDefaultDescription
variantEnum
'contained' │ 'outlined' │ 'ghost' │ 'ghost_icon'
falsecontainedSpecifies which variant to use
colorEnum
'primary' │ 'secondary' │ 'danger'
falseprimarySpecifies color
disabledBoolfalsefalseIf `true`, the button will be disabled.
classNameStringfalse[Empty String]@ignore
childrenCustomfalsenull@ignore
hrefStringfalseundefinedURL link destination If defined, an 'a' element is used as root instead of 'button'
tabIndexNumberfalse0
✏️ Edit this page on GitHub