Link Button
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".
Last updated
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".
Last updated
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.
