The Button component is a flexible user interface element that allows users to interact with your application and trigger different actions and operations. Other than prebuilt 120 variants, we provide many customization options to accommodate various design preferences and use cases. Buttons are commonly placed throughout your user interface, such as in
modal windows
forms
cards
toolbars
Anatomy
The anatomy of a button component consists of essential elements such as the button label, container, prefix/suffix icon, and optional properties for customization, enabling user interaction and engagement within your application.
Properties
With our variants and variable structure, you have the creative freedom to tailor your buttons to precisely match your design preferences. All variable and variants identified exactly same on both our design system and our multi-framework component library.
Kinds
Filled button are used to indicate the main action or the primary path a user should take. They have a strong visual indicator, encouraging users to complete their intended journey. Its a solid-colored button.
Outlined button are typically placed alongside primary buttons and indicate that there are multiple avenues or alternative actions users can take.
Dashed button have a dashed border. They are used to draw attention without being too visually dominant.
Text button are used for less prominent actions to maintain focus on the primary content. They have minimal visual weight and its perfect for text links and unobtrusive calls to action.
Incorporating icons into buttons can enhance the user experience by providing visual cues, improving aesthetics, and simplifying interactions.
No Icon button is often used for actions that are self-explanatory or when a text label alone provides sufficient context
Prefix Icon button is positioned before the text label on a button, offering additional context or visual emphasis to the action.
Suffix Icon button appear after the text label, offering visual cues or feedback related to the action.
Icon-Only button use visual symbols without any accompanying text. They are ideal when actions can be represented by universally recognised icons, reducing clutter and text translations.
Button events are used to perform specific actions when a button is clicked. With the Plus-Button component, you can use the "plus-click" event to capture button click events and trigger functions accordingly.
Layout and spacing for buttons in user interfaces are crucial for usability, aesthetics, and accessibility. By paying attention to the placement and spacing of buttons, designers can create interfaces that are both visually appealing and user-friendly, ultimately enhancing the overall user experience.
Light & Dark Mode
Providing both light and dark modes for buttons in user interfaces enhances user comfort, choice, accessibility, and energy efficiency. It also aligns with contemporary design trends and accommodates a variety of user preferences and needs.
We structured the design system simply switch from the light mode to the dark mode within the Layer > Color section.
Accessibility
Accessibility is not only a moral and legal imperative but also a valuable design principle. Ensuring that buttons in a design system are accessible not only benefits users with disabilities but also leads to a more inclusive, user-friendly, and successful digital product.
To learn more about Plus UI's accessibility criteria, please visit Accessibility.