The Image Button component allows you to create clickable images with overlaid text. You can customize various settings, such as the image’s aspect ratio, text placement, and background overlays, ensuring the button fits your design needs. This component can be used to highlight important links to other pages.
Usage
Do
- Choose high-quality, relevant images that support the content or message.
- Ensure the text is readable by selecting appropriate overlay colors or contrast.
- Position the text in a way that doesn’t obscure important parts of the image.
- Use clear, concise text to communicate your message effectively.
- Set the aspect ratio to match the layout and visual style of your page.
- Consider using image buttons for key calls to action or navigation elements.
- Test the button on different screen sizes to ensure the image and text are responsive.
Don't
- Don’t overcrowd the image with too much text or long sentences.
- Avoid using images that are too busy or distract from the text overlay.
- Don’t rely solely on the image button for important content—make sure key information is available elsewhere too.
- Don’t use low-contrast colors for text and overlays that make the content hard to read.
- Don’t use the component in place of a regular button if the image doesn’t add value.
- Avoid making the button too small, making it hard for users to notice or click.
Accessibility
- Ensure that you provide suitable alt text for images. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.