✨ Watch on YouTube | 🐙 GitHub | 🎮 Demo
Let me share a reusalbe bulletproof React component for displaying a clickable icon - the IconButton
.
The IconButton component
The Container
component is a styled button that will have different styles based on size
and kind
props. Here we have s
, m
, l
sizes, and regular
, secondary
, alert
kinds. You can have more or less depending on your needs.
import { ComponentProps, Ref, forwardRef } from "react"
import styled from "styled-components"
import { defaultTransitionCSS } from "../animations/transitions"
import { centerContentCSS } from "../utils/centerContentCSS"
import { getCSSUnit } from "../utils/getCSSUnit"
import { getSameDimensionsCSS } from "../utils/getSameDimensionsCSS"
import { matchColor } from "../theme/getters"
import { match } from "lib/shared/utils/match"
import { interactiveCSS } from "../utils/interactiveCSS"
export const iconButtonSizes = ["s", "m", "l"] as const
export type IconButtonSize = (typeof iconButtonSizes)[number]
export const iconButtonKinds = ["regular", "secondary", "alert"] as const
export type IconButtonKind = (typeof iconButtonKinds)[number]
const sizeRecord: Record<IconButtonSize, number> = {
s: 24,
m: 32,
l: 40,
}
interface ContainerProps {
size: IconButtonSize
kind: IconButtonKind
}
const Container = styled.button<ContainerProps>`
all: unset;
${interactiveCSS};
position: relative;
${centerContentCSS};
${({ size }) => getSameDimensionsCSS(sizeRecord[size])};
font-size: ${({ size }) => `calc(${getCSSUnit(sizeRecord[size] * 0.6)})`};
border-radius: 8px;
${defaultTransitionCSS};
color: ${matchColor("kind", {
regular: "text",
secondary: "text",
alert: "alert",
})};
background: ${({ kind, theme: { colors } }) =>
match(kind, {
regular: () => colors.mist,
secondary: () => colors.transparent,
alert: () => colors.alert.getVariant({ a: (a) => a * 0.12 }),
}).toCssValue()};
:hover {
background: ${({ kind, theme: { colors } }) =>
match(kind, {
regular: () => colors.mist,
secondary: () => colors.mist,
alert: () => colors.alert.getVariant({ a: (a) => a * 0.24 }),
}).toCssValue()};
color: ${matchColor("kind", {
regular: "contrast",
secondary: "contrast",
alert: "alert",
})};
}
`
export interface IconButtonProps extends ComponentProps<typeof Container> {
icon: React.ReactNode
size?: IconButtonSize
kind?: IconButtonKind
title: string
}
export const IconButton = forwardRef(function IconButton(
{ size = "m", kind = "regular", icon, ...rest }: IconButtonProps,
ref: Ref<HTMLButtonElement> | null
) {
return (
<Container kind={kind} ref={ref} size={size} {...rest}>
{icon}
</Container>
)
})
We remove all the default styles from the button with the all: unset
CSS rule. Then we apply the interactiveCSS
that will add cursor: pointer
. To center icon inside we turn it in a flexbox element with alignItems: center
and justifyContent: center
using the centerContentCSS
. To make it a square we use the getSameDimensionsCSS
helper, and to make the icon fit inside we set the font-size
to 60%
of the size.
I use HSLA
color format through my apps, and you can learn more about it in my blog post. Here we use the matchColor
helper to get the color based on the kind
prop. We do the same for the background
, but here we want to maninulate color parameters so we have to write a bit more code. We use the same approach to update color
and background
on hover.
The IconButton
component will receive the same properties as the container, but also icon
and title
props. The icon
prop is a React node that will be rendered inside the button. In my apps I have icons as a regular React component and you can learn more about the setup here. We make the title
prop required for accessibility purposes, since there is no text inside the button we need to have some explanation for the action.
There are situations where you want the icon to be aligned with the content and have hover effect go beyond the boundaries of the element, to do that you can use the Hoverable
component that positions highlight absolute, and you can learn more about it in my blog post.
Top comments (0)