Collection of theme-ui and external components.
created:3/15/2021
updated:3/15/2021
source lines:30
comments %:0

IconButton

theme-ui
0.6.0-alpha.7

Transparent button for SVG icons

IconButton variants can be defined in the

theme.buttons
object. By default the IconButton component will use styles defined in
theme.buttons.icon
.

Component

import { IconButton } from 'theme-ui';

Overview

() => (
<IconButton aria-label="Toggle dark mode">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="currentcolor"
>
<circle
r={11}
cx={12}
cy={12}
fill="none"
stroke="currentcolor"
strokeWidth={2}
/>
</svg>
</IconButton>
)

Properties

Name
Description
Default
BoxOwnProps (4 properties)
as
ElementType<any>
-
variant
string
-
css
Interpolation<any>
-
sx
ThemeUIStyleObject
-
SpaceProps (28 properties)
ButtonHTMLAttributes (11 properties)
HTMLAttributes (44 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)

External dependencies

package
imports
peer
react
React

Internal dependencies

file
imports
"./Box"

Component JSX