thumbprint
thumbprint copied to clipboard
[@thumbtack/thumbprint-react]: Add support for Button and Link to wrap an Icon or Image
Currently, to create a purely graphical (icon or image) Button
or Link
, you must use the text-style component variant (TextButton
or Link
) with theme="inherit"
and use the iconLeft
prop to provide the icon component (which only really works for icon buttons, not image buttons). This is arguably unintuitive. A more desirable API for icon/image buttons would be something like:
<[Text]Button theme="graphic" accessibilityLabel="...">
<IconComponent />
// or
<ImageServicePicture id="..." />
</[Text]Button>
The important things here are:
- A dedicated theme specifically for purely graphical links and buttons
- Being able to provide the icon/image as the
children
prop
Additionally, accessibilityLabel
would be required in this case (maybe using the new theme
value as the heuristic). For buttons and links that need text + icon, using the iconLeft
(and proposed iconRight
) seems intuitive enough.
An idea came to mind. Since we have different components for the button-style and text-style cases, maybe this should be a new component for graphic-style buttons/links called something like GraphicButton
and GraphicLink
to simplify the API.