IconButton

The IconButton component is used to trigger an action or event.

import { IconButton } from '@backyard-ui/core';

Use the size prop to increase the visual size.

Use the appearance prop to change the visual communication.

Use the variant prop to change the visual communication.

Use the radius prop to increase the border-radius.

Use the isLoading prop to show its loading state.

Use the isDisabled prop to show its disabled state.

• radius
  Description The `border-radius` property

  Type

  "sm" | "md" | "lg" | "xl" | "2xl" | "full"

  Default

  xl
• icon required
  Description The icon to be used in the button.

  Type

  ReactElement<any, string | JSXElementConstructor<any>>
• appearance
  Description The Button appearance

  Type

  "success" | "critical" | "info" | "warning" | "neutral" | "primary" | "secondary" | "tertiary"

  Default

  primary
• variant
  Description The variant is used to change the visual communication.

  Type

  "solid" | "subtle" | "outline" | "ghost"

  Default

  solid
• isLoading
  Description Set loading state.

  Type

  boolean
• size
  Description The Button size

  Type

  "xs" | "sm" | "md"

  Default

  sm
• isDisabled
  Description Set disabled state.

  Type

  boolean
• social
  Description Used to apply social login styles

  Type

  "apple" | "facebook" | "google" | "twitter"
• ariaLabel
  Description A11y: A label that describes the button

  Type

  string