Button
Text button is used to initiate actions on a page or form.
Last updated
Text button is used to initiate actions on a page or form.
Last updated
Buttons enable users to initiate an action or command with a click or tap. They are used to start actions, apply functions to selected objects, and activate or deactivate features. Buttons typically trigger an immediate response and can be placed within dialogs, forms, modal windows, and other containers.
A button’s label or text description clearly conveys its purpose, guiding users in performing actions such as starting an application or saving information. Buttons serve as a fundamental building block of our products. While the secondary button variant is most commonly used, other variants are available to indicate different levels of hierarchy or specific functionalities.
aria_label
Accessibility label for screen readers.
string
button_color
Defines the button color variant. Example values: 'primary', 'error', 'success', etc.
string
button_id
Unique identifier for the button element.
string
button_shape
Defines the button's shape. Example values: 'rounded', 'square', 'pill'.
string
clickHandler
Function to be executed when the button is clicked.
(event: MouseEvent) => void
component_mode
Used for setting a mode-related styling or behavior.
string
custom_class
Allows adding a custom CSS class to the button for additional styling.
string
disabled
Determines if the button should be disabled.
boolean
end_icon
The name of the icon to display at the end of the button. Uses Material Icons.
string
gap
Specifies the spacing between elements inside the button.
number
icon_button_shape
Defines the shape of an icon-only button.
string
size
cifies the button size. Example values: 'sm', 'md', 'lg'.
string
start_icon
The name of the icon to display at the start of the button. Uses Material Icons.
string
type
Specifies the button type. Common values: "button", "submit", "reset".
string
Lead Icon: Positioned to the left of the button text, the lead icon visually represents the action or purpose of the button. It provides a quick visual cue that helps users understand the button's function at a glance.
Text: The main label of the button, describing the action that will be performed when the button is clicked. Clear and concise text improves usability by indicating the button’s purpose.
Trail Action: Positioned to the right of the button text, the trail action (such as an arrow) further emphasizes the direction or nature of the action. It visually reinforces the button’s function, often indicating forward movement or progression.
Use text buttons for less prominent actions or secondary actions.
Don't use text buttons for primary actions or actions that require high visibility.
Ensure text buttons have sufficient touch target size and padding for accessibility.
Don't use text buttons in tight spaces where they might be difficult to interact with.
Use clear, descriptive text that indicates the action of the button.
Avoid using generic labels like "Click Here" or "Submit" that don't provide specific context.
Ensure text buttons meet color contrast requirements for readability and accessibility.
Don't rely solely on color to indicate the button's state or importance; consider using additional visual cues.
Use text buttons in contexts where minimal visual emphasis is needed, such as in toolbars or inline actions.
Don't use text buttons in contexts where visual prominence and strong call-to-action are required.
Provide adequate spacing around text buttons to avoid accidental clicks on adjacent elements.
Avoid placing text buttons too close to other interactive elements, which can cause usability issues.
Use consistent styling for text buttons to maintain a cohesive design system.
Don't use inconsistent styles for text buttons across different parts of the application.
Consider the text length and avoid truncation or wrapping of button text.
Don't use overly long text that might not fit within the button's design constraints.
