A Link Button is styled as a button but acts like a hyperlink, guiding users to other pages or resources. It’s commonly used for navigational actions such as "Learn More" or "Download".
Link buttons facilitate straightforward navigation, using text to direct users to different pages or resources. They are perfect for contexts like footers or menu items where clear labeling is crucial. Typically used for actions such as "View More" or "Sign Up", they guide users effectively through a digital environment.
A Link Button consists of clear, concise text within a button outline, designed to direct users with straightforward language. It optimizes navigation by clearly stating its function, such as "Learn More" or "Register." Link Buttons feature distinct visual states (hover, active, disabled) and can be styled to match the design hierarchy, facilitating easy user interaction and guidance through different sections or pages.
aria_label
A string that defines the accessible label for the button. It helps with accessibility, especially for screen readers.
string
button_color
Defines the color theme of the button. Common values could be 'primary', 'error', or any custom color class.
string
button_id
A string that sets the id attribute of the button, allowing for unique identification in the DOM.
string
button_shape
A string to define the shape of the button, like 'round', 'square', or any custom class for shaping.
string
component_mode
A string that can be used to define the mode of the component, for example, a theme or variation of the button.
string
custom_class
A string that allows for a custom CSS class to be applied to the button. Useful for additional styling beyond the predefined options.
string
disabled
A boolean that controls whether the button is disabled. If set to true, the button will not be interactive.
boolean
end_icon
A string representing the icon class to be displayed at the end of the button (after any text). It uses material icon classes by default.
string
gap
A number that defines the spacing between the button content (like text and icons). It adjusts the gap between the start and end icons and any content in the middle.
number
href
A string that defines the link for the button. This makes the button behave like an anchor tag (<a>). Defaults to "#" if not specified.
string
icon_button_shape
Similar to button_shape, this prop defines the shape of the icon button (if the button is primarily for an icon).
string
size
A string that defines the size of the button. Possible values could include 'sm' (small), 'md' (medium), or 'lg' (large).
string
start_icon
A string representing the icon class to be displayed at the start of the button (before any text). It uses material icon classes by default.
string
type
Specifies the type of the button. This can be set to 'button', 'submit', or other valid HTML button types. Default is 'button'.
string
Lead Icon: Positioned at the beginning, the lead icon primes the user on the button's function, offering a visual cue that enhances recognition and usability.
Text: The central text on the button conveys the action or intent clearly and directly, guiding the user with explicit instructions or labels.
Trail Action: A secondary icon or element at the end, providing additional interaction options or indicating further actions, such as navigation arrows or dropdown indicators.
Dos
Don'ts
Use descriptive text that clearly indicates where the link will lead, such as "View Account Details" or "Read More About Our Services".
Avoid using generic text like "Click Here"; use phrases that explain the result of the interaction.
Ensure Link Buttons are easy to locate and visually stand out as clickable elements, enhancing navigation.
Do not saturate your interface with Link Buttons; use them sparingly and strategically to guide users without overwhelming them.
Provide adequate spacing with enough padding and margin around each button to make them easily clickable, especially on mobile devices.
Avoid inconsistencies in style; ensure that Link Buttons are consistent with the rest of your website or app to keep the user interface cohesive.
Highlight interaction by changing the appearance (e.g., underline, color change) on hover or focus to indicate that the text is interactive.
Do not rely solely on color to differentiate link buttons; consider adding icons or different styles for better distinction.
Maintain accessibility by using appropriate ARIA roles and properties, and ensure text has high contrast against its background for visibility.
Prevent accessibility issues by not using small font sizes or low-contrast text that can be hard to read for those with visual impairments.
Buttons are fundamental interactive elements used in user interfaces to trigger actions, submit forms, and navigate through different parts of an application
Icon Button is used to perform an action with an icon, without requiring a text label. It is often used for actions like editing, deleting, or navigating.
Icon buttons allow users to perform quick actions using only an icon, making them ideal for spaces like toolbars, headers, or mobile interfaces where space is limited. They’re best suited for familiar actions (e.g., "edit," "delete") .
An icon button consists of a single icon within a button shape, designed to convey its purpose through the icon alone. Icon buttons enhance usability by providing efficient, space-saving interactions. Each button has distinct visual states (hover, active, disabled) and can be styled to indicate hierarchy or function, supporting user navigation and interaction.
Icon: The central element of the button, the icon visually represents the action associated with the button. It allows users to quickly understand the button's purpose, especially in interfaces where space is limited. The icon itself is the primary visual cue, making the button intuitive and easy to recognize.
Dos
Don'ts
Use clear and recognizable icons that represent the action effectively.
Don’t overcrowd the interface with too many Icon Buttons; prioritize actions.
Ensure the button is easily tappable or clickable, with sufficient spacing around it.
Avoid using ambiguous or unclear icons.
Provide tooltips or ARIA labels for icons that might not be universally understood.
Don’t rely solely on color to indicate different button states; use shapes and icons as well.
Use appropriate variants to indicate the button's importance or state.
Don’t use icons without providing textual alternatives for accessibility purposes.
Ensure icons have sufficient contrast against their background.
Avoid inconsistent usage of icon button styles across similar actions.
Social Media Login Buttons enable quick login or signup using social media accounts, offering a convenient authentication option.
Social Media Login Buttons are ideal for providing users with a quick, familiar login option via their social media accounts. They are commonly used on login or signup pages, offering a seamless alternative to traditional email or password-based authentication.
A Social Media Login Button enables users to authenticate by connecting their social media account with a single click or tap. Each button displays the logo of the corresponding social media platform, ensuring instant recognition and a clear understanding of the login method.
Brand Logo: Positioned to the left of the button text, the brand logo (e.g., the Apple logo, Google, Facebook) represents the social media or service provider associated with the login. This logo provides quick brand recognition, helping users identify the service they’re using for authentication.
Text: The main label of the button, such as "Sign in with Apple," describes the action that will be taken when the button is clicked. This text clarifies the login method, making it easy for users to understand the purpose of the button.
Use official logos and colors of each social media platform for brand consistency.
Don’t alter the colors or logos, as this may reduce recognizability and violate brand guidelines.
Ensure clear labeling or tooltip if the icon alone may not be obvious to all users.
Don’t use social media login buttons as the only login option if users might not have those accounts.
Place Social Media Login Buttons in a prominent area on the login or signup page.
Don’t overcrowd the page with too many social media options; limit to popular platforms.
Provide a visual focus state for keyboard navigation to meet accessibility standards.
Don’t neglect accessibility—ensure buttons are usable with keyboard and screen readers.
Text button is used to initiate actions on a page or form.
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.
