Skip to main content


Clickable elements that are used to trigger actions. Buttons communicate what action will occur when users interact with it.

Live Editor


  • Apply the same width of the container for all buttons when they are in a group.
  • Use only one primary button and two of the same lower emphasis when in the button group.
  • Maintain the same style about using or not an icon with the label text in the button group.


  • Do not use two primary buttons in a button group.
  • Do not use buttons with icons and buttons without icons in a button group.
  • Do not have more than one primary action.
  • Do not pair a solid primary and solid destructive button - one must take precedence over the other.
  • Do not use buttons with icons only (in case this is impossible please always add text for a tooltip and an aria label as they are needed to meet accessible requirements)


  • High: Are used for the most important and common actions on the screen.These are Primary and Destructive buttons
  • Default: Used as secondary actions that can be more than one on the same page. This is the most common button usage within Grafana.
  • Low: Are complementary actions or links that are optional on the page.

button emphasis



Filled with Label

Filled with Icon + Label

Filled with Label + Icon

Filled with Icon + Label + Icon

HighUsed for "call to action", i.e. triggering the main action. There should never be more than one on a page. If you need multiple buttons for different actions, decide which action is the most important and make that the primary Button. All other Button components should be secondary. If there is no primary action, all Button components should be secondary.




DefaultThe secondary Button is the default button style and can trigger various actions. How it is used depends on its surroundings: 1. When next to the primary Button, the Secondary style can for example be used for "Cancel" or "Abort" actions. 2. When there is no main important action on a given page, all Button components should use the secondary style.




Icon + Label Button

  1. Solid container
  2. Icon
  3. Text label


Icon Button

Note: Before using buttons without text always consider using IconButton instead.

  1. Solid container (optional)
  2. Icon

Button Sizes & Label Typography

SizeWidth-Height (px - rem)Font-SizeFont-Weight
SmallAuto - 24px12px500
MediumAuto - 32px14px500
LargeAuto - 48px18px500

button sizes

Hierarchy & Button Pairings

  • Primary/Destructive Button — High Emphasis:

    A single page should only display one button with the highest importance for the main action. Other buttons should have lower emphasis and be visually different within the UI. This primary button has to attract the user's attention.

  • Secondary/Icon Button — Default Emphasis:

    A single screen can show more than one button, the other buttons can be in the same page with a primary button, these buttons have to be less important according to the actions, and do not distract users from the main content page. You should only group calls to action that are related to each other. A higher emphasis button can be paired with multiple buttons which are lower emphasis.

  • Outline/Text Button — Low Emphasis:

    These buttons have less impact and are less distracting to the user's attention, on the same screen several of them can be used. They are actionable to take users to a new page, the main objective being to provide more information about that section.

Margin & Padding

Small0px 8px 0px 0px0px 8px
Medium0px 0px 0px 16px0px 16px
Large0px 0px 0px 16px0px 16px


  • Primary

    • On the page on the top-right
    • Inside the content page on the center
  • Default

    • Inside cards on the bottom-right
    • Inside content page on the bottom-left
  • Text link

    • Inside cards on the top-right
    • Inside cards on the bottom-center


  • Use ARIA tags when using buttons to ensure they are accessible.
    • For example buttons represented by icons, the accessible name may be provided from the aria-label or aria-labelledby attributes.
    • Using role="button" instead of the semantic <button> or <input type="button"> (iOS "clickable elements" fix for role="button")

Further Reading & Sources