Button

A versatile and interactive element. Buttons allow users to perform actions and navigate through an application. They come in various styles and sizes, providing clear visual cues and feedback to users.

Get Tetrisly for Figma

Install Tetrisly for React

Key Features

• Clear purpose

  The visual design reflects the button's intended functionality, ensuring users understand the action it will trigger.

• Interactive feedback

  Responsive feedback for different interaction states, reassuring users of its functionality.

• Accessibility-Friendly

  Following best practices, our button supports diverse user abilities and preferences through proper contrast, text size, and focus indicators.

• Consistent experience

  The component delivers a consistent behavior across platforms and devices, aligned with the brand and promoting a cohesive user experience.

Variants

By providing diverse options, we ensure that components can be tailored to fit different contexts, requirements, and design preferences. Understanding and leveraging these options will help you create a more engaging and adaptable user interface for your website or application.

Type

The different Types provide a visual representation of the button that you can use according to your UI needs.

Appearance

The Appearance is strictly related to the hierarchy of the buttons. It is crucial to choose the proper Appearance depending on the importance of the action the button implies.

Intent

The intent of the button is to provide clear semantic information: none (default actions), success (positive outcomes), and destructive (caution-required actions).

Size

Size property adjusts button dimensions (small, medium, large) to suit various contexts, improving visual hierarchy and enhancing user experience across different devices and screen sizes.

Before Icon

The icon on the left draws the user's attention and allows for faster scanning and understanding of the button's meaning.

After Icon

The icon on the right helps to reinforce the button's function by providing additional visual information.

Dropdown Indicator

Indicates the presence of a dropdown menu or list when clicked. It is commonly used to provide access to additional options or actions related to the button's primary function.

State

The button gives visual feedback and makes the user more aware of how to interact with the interface. That is why buttons have several different states, depending on their state of use.

Property	Values	Default value
Type	Default, Ghost, Bare	Default
Appearance	Primary, Secondary, Inverted, Reverse Inverted	Secondary
Intent	None, Success, Negative	None
Size	Large, Medium, Small	Medium
Before Icon	Yes/No	No
After Icon	Yes/No	No
Dropdown Indicator	Yes/No	No
State	Normal, Hover, Active, Focus, Selected, Disabled, Loading	Normal

Hierarchy

Primary - One important button

Use the primary button for the main action in your layout. This button is designed to be noticeable and attract the user's attention.

Type	Default
Appearance	Primary, Inverted

Secondary - Several regular buttons

Use secondary buttons for actions that are not as important but still common. Begin with this button when designing to maintain proper focus on primary actions while ensuring a balanced UI.

Type	Default
Appearance	Secondary

Tertiary - Supporting buttons

Use tertiary buttons for the least important actions that support the Primary and Secondary actions. These buttons have the smallest visual emphasis and blend into your layout without drawing too much attention. Our design includes multiple tertiary buttons that have a simpler appearance compared to the secondary button or primary button.

Type	Ghost, Bare
Appearance	Primary, Secondary, Inverted, Reverse Inverted

Example

Anatomy

1. Default type
   1. Before Icon
   2. Label
   3. After Icon
   4. Container
2. Ghost type
   1. Before Icon
   2. Label
   3. After Icon
   4. Container
3. Bare type
   1. Before Icon
   2. Label
   3. After Icon

Best Practices

Visual Hierarchy

Choosing the button's appearance, always think about the priority of actions first. When using more than one button, remember about their hierarchy. For multiple actions, there should be only one Primary button, so the user can immediately know which action is most desirable.

Do

Don't

Don’t overuse the buttons

Having over three buttons at once can confuse users. Show only important actions and keep the design simple for better user experience. Rest of the actions you can put under the dropdown.

Do

Minimize icons in button

Use the button with the icon when an additional explanation is needed, not for a decorative visual aspect.

Do

Don't

Content Guidelines

Crafting effective button labels is crucial for enhancing user experience and guiding users seamlessly through your interface. To create button labels that effectively communicate their purpose, consider the following key principles in your design process.

To the point

The label should be short and to the point. Use short, simple, and easy-to-understand button names to show the user what to do next.

Do

Don't

Precision

Make sure buttons tell precisely about the action they trigger.

Do

Don't

Clarity

Use clear and easily understandable language (avoid jargon and technical terms).

Do

Don't

Context

Remember to make the label on the button consistent with the text it precedes.

Do

Don't