UI Token


In UI design, a button is a graphical element that allows a user to take an action, such as submitting a form, opening a menu, or performing a task. Buttons are typically labeled with a short, descriptive text that indicates the action that will be taken when the button is clicked. Buttons are used in UI design to allow users to take actions within a digital interface. They are typically placed in prominent locations, such as near the top of a page or in a navigation bar, to make them easy to find and use. Buttons should be avoided in UI design if they are not necessary or if they could be confusing to the user. For example, if a button's purpose is not immediately clear, or if it could be mistaken for a different type of element, it should be avoided. There are several different types of buttons in UI design, including primary buttons, secondary buttons, tertiary buttons, and ghost buttons. Primary buttons are the most important buttons on a page and are typically used for the main action, such as submitting a form. Secondary buttons are used for less important actions, such as canceling a form. Tertiary buttons are used for even less important actions, such as resetting a form. Ghost buttons are transparent buttons that are often used for visual interest or to create a subtle call to action.


Types are variations or derivatives of an individual element. They can help you choose what to include in your design.
With Icons

Interaction States

Interaction states communicate the status of an element on the user interface. Consider all of the following states when designing this element:

Chart Features

For this particular visualization, you may consider these additional features.
No items found.

Get it for Figma!

Everything on this website has been designed in Figma, and is ready to use.
A preview of the Figma Design Encyclopedia design systemThe logo for the Figma design app
Buy for Figma
Preview the file before you buy!

View more:

The Design Encyclopedia is a passion project by Jon Moore to learn how to use Figma, and was designed and built in Webflow (this is an affiliate link). If you would like to reference the encyclopedia in a separate project, partner on a collaboration, or have a general inquiry, send me an email.

© 2021 Design Encyclopedia. All rights reserved.
A square collage of design components from the design encyclopedia.