Iconic Button

A button that's an icon, with or without a label.

import { IconicButton } from "@nulogy/components";

<IconicButton icon="delete" />

Use when

  • When a possible action would best be communicated via iconography

Variations

With a label

<IconicButton icon="delete">Delete</IconicButton>

With a hidden label

<IconicButton labelHidden icon="delete">Delete</IconicButton>

Disabled

<IconicButton icon="delete" disabled>Delete</IconicButton>

Props

NameTypeDefaultDescription

icon

String

Required

The icon to display. See the Icons component for all possible options.

labelHidden

Boolean

false

Will display the label under the Iconic Button on hover or button focus.

disabled

Boolean

false

Lightens the opacity and makes the button unable to be clicked.

className

String

undefined

className passed to the button component.

IconicButtons have access to space style props. See the style prop documentation for a full list of available props.

Related components