Tile Button
Tile buttons are large, clickable areas that combine text and visuals to represent an action or navigate to a different section. It is designed to provide a more engaging way to interact with content.
Last updated
Tile buttons are large, clickable areas that combine text and visuals to represent an action or navigate to a different section. It is designed to provide a more engaging way to interact with content.
Last updated
Tile buttons enhance user engagement by providing a clear, visually compelling path to actions or sections, making navigation intuitive and effective.
Use tile buttons to draw attention to important actions or sections, making them more accessible and prominent.
Ideal for scenarios where visual representation helps users understand the action or destination, such as dashboards or landing pages.
Ideal for mobile or touch-based interfaces where larger, tappable areas improve usability and interaction.
When you need to group related actions or sections together visually, tile buttons can help maintain clarity and organization.
Avoid using tile buttons when you need to present detailed, complex content. Cards, with their ability to contain more varied and intricate information, are better suited for such use cases.
Avoid using tile buttons in areas with restricted space where their large size could lead to a cramped or cluttered interface.
Avoid using tile buttons for repetitive actions that don't need the visual emphasis and space that tile buttons provide. Standard buttons may be more appropriate in such cases.
Accent button
Visually distinct buttons to highlight key actions within an interface.
Primary Button
For the important actions users can take.
Secondary Button
Complements primary buttons, secondary importance.
Button Container: The primary structure that holds all elements of the tile button, defining its size and shape.
Slot: A flexible space for inserting custom content, such as images or additional icons.
Icon: A visual element that provides quick, recognizable representation of the tile button’s action.
Title: The main text that clearly communicates the primary action or destination of the tile button.
Description: Additional text providing more details about the action or content associated with the tile button.
Tag: A small label indicating status, category, or additional information about the tile button’s content.
Footer_Link: A clickable text element in the footer that guides users to more detailed content or actions.
Footer_Icon Trailing: An optional icon placed at the end of the footer, used to signify an action or direction.
Keyboard Navigation: Ensure tile buttons are fully accessible via keyboard navigation, allowing users to tab through them and activate using the Enter or Space keys.
Screen Reader Compatibility: Tile buttons should be compatible with screen readers, with clear labels that describe their action or destination, ensuring visually impaired users can interact with them effectively.
Contrast and Visibility: Maintain high contrast between the text, icons, and background within tile buttons.
Visual Hierarchy: Maintain a clear visual hierarchy within the tile button, ensuring that the most important elements, such as the title and icon, are prominent and easily recognizable.
Product Categories: On an e-commerce homepage, tile buttons represent different product categories such as "Men’s Wear", "Women’s Wear" and "Accessories".
Feature Highlights: Use tile buttons on a landing page to highlight key features or sections, such as "Learn More", "Get Started" or "Pricing".
App Navigation: In a mobile app, tile buttons navigate users through various app sections like "Messages", "Profile" and "Settings".
