IconButton

Use the IconButton component for simple interactions that doesn't need labeling, like "Copy text" or format options like "Insert link". Use the nested hover tooltip to describe the action or show the shortcut.

#Usage

Note that the IconButton needs either a tooltip or an ariaLabel because of accessibility reasons.

#IconButton with tooltip

import { IconButton } from '@kinsta/stratus'

const MyComponent = () => (
  <>
    <IconButton icon="Wrench" tooltip="This is a wrench" />
  </>
)
Copy

#IconButton with aria-label

import { IconButton } from '@kinsta/stratus'

const MyComponent = () => (
  <>
    <IconButton icon="Wrench" ariaLabel="This is a wrench" />
  </>
)
Copy

#Props

The IconButton components interface extends the HTMLButtonElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style).

#Types

• IconName: visit the Icon's docs for more info.
• IconButtonProps: props of the IconButtonProps component processed by stratus.
• IconButtonInterface: IconButtonProps extended by HTMLAttributes<HTMLButtonElement >.

Read more about types here

#See also

• Icon
• Button
• Tooltip