components
IconButton (design)
IconButtons are specific instances of a Button, where the only content is an Icon.
Usage
An IconButton is just like a regular Button and accepts any icons from Chameleon Icons.
Appearances
IconButtons have the same variations for its appearance as the regular buttons, but with an additional default appearance.
import { Brand } from '@mediahuis/chameleon-theme-wl/icons'
import { IconButton } from '@mediahuis/chameleon-react'
Appearance default
The IconButton with an appearance of default has a black background with a transparancy of 5% on hover and has the option to change the icon's color. It is especially helpful when using it on a colored backtround as in the example below.
An IconButton with an appearance of default is used to close this banner.
import { IconButton } from '@mediahuis/chameleon-react'
Sizes
IconButtons come in two sizes, large (48px x 48px) and small (32px x 32px).
import { IconButton } from '@mediahuis/chameleon-react'
Shapes
The default shape of the IconButton is squared, but can be customized to a circular shape when needed.
import { IconButton } from '@mediahuis/chameleon-react'
Related components
- If you're looking for a regular button with text or text and an icon, use the Button component.