Button

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

import { Button } 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 iconLeft or iconRight prop to display an icon on both sides.

Use the isLoading prop to show its loading state.

Use the isDisabled prop to show its disabled state.

Use the isFullWidth prop to render a button with size 100%.

Use the asChild prop to render as Link.

• asChild
  Description Change the component to the HTML tag or custom component of the only child

  Type

  boolean
• radius
  Description The `border-radius` property

  Type

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

  Default

  xl
• 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
• iconLeft
  Description Display an icon.

  Type

  ReactNode
• iconRight
  Description Display an icon.

  Type

  ReactNode
• isFullWidth
  Description Set button full width.

  Type

  boolean
• social
  Description Used to apply social login styles

  Type

  "apple" | "facebook" | "google" | "twitter"