Icon Button

Button with only an icon and no label.

#Usage

#Ghost

This is a default variant. Most likely this is the only format you'll need to use.

#Secondary

Secondary icon button looks nearly the same as a ghost variant, except it has a light gray border. This variant looks good near text labels. It's named "secondary" for consistency with Button component.

#Loading

#Large

#Small

#Guidelines

#Icons

• Only use icons from Heroicons.
• Don't override icon size.
• Prefer outline icons over solid ones.

#Props

Inherits margin props.

#isDisabled

Type: boolean
Default: false

Toggles the disabled state.

#aria-label

Type: string

Button's meaning for screen readers.

#icon

Type: ComponentType<SVGAttributes<SVGElement>>

Button icon.

#onClick

Type: () => void

Callback for when button is clicked.