Button

The Button component renders a button. Use a button when you want to call a function on click.

Don't use a button where a link is more appropriate!

Button @"src/components/Button"

Edit the props to see this component update live!

jsx

<Button
  variant="secondary"
  label="Publish!"
  size="lg"
  shadow
  icon={<IoMegaphone />}
  onClick={() => alert("Your content has been published!")}
/>

<Button
  variant="secondary"
  label="Publish!"
  size="lg"
  shadow
  icon={<IoMegaphone />}
  onClick={() => alert("Your content has been published!")}
/>

Variants

A variant defines the appearance of a button.

Variant: ui

Variant: accent

Variant: chrome

Variant: primary

Variant: secondary

Variant: black

Variant: grey

Variant: white

Variant: info

Variant: success

Variant: warning

Variant: error

Variant: disabled

Variant: transparent

Variant: gradient

Props

Size

size="sm"

size="md"

size="lg"

Shadow

By default buttons are rendered "flat". Adding the shadow prop renders them with subtle shadows.

Example

jsx

<Button variant="success" label="Button with a shadow" shadow />

Disabled

The disabled prop should be set to a boolean value. When set to true the button variant is set to "disabled". The disabled attribute is set to true on the button element and the button cannot be clicked.

Button with disabled prop

jsx

<Box sx={{ display: "flex", gap: 3 }}>
  <Button
    label="Active Button"
    disabled={false}
    onClick={() => alert("This button is active!")}
  />
  <Button
    label="Disabled Button"
    disabled={true}
    onClick={() => alert("This onClick function won't run!")}
  />
  <Button label="Active Button" />
  <Button label="Disabled Button" disabled />
</Box>

Icons

To use icons in a Button component, import the icon and add it as an icon prop or wrap it with the Button component.

Button with just an icon

jsx

<Button variant="black" icon={<GrGithub />} size="lg" />

Or,

Button with a label and icon on the right

jsx

<Button variant="info" label="Get the code!" icon={<HiExternalLink />} right />

Theme

json
{
  "ui": {
    "color": "uiText",
    "bg": "ui",
    "&:hover": {
      "color": "uiTextHover",
      "bg": "background"
    }
  },
  "accent": {
    "color": "uiText",
    "bg": "accent",
    "&:hover": {
      "color": "uiTextHover",
      "bg": "accent"
    }
  },
  "chrome": {
    "color": "chromeText",
    "bg": "chrome",
    "&:hover": {
      "color": "#ffffff",
      "bg": "chrome"
    }
  },
  "primary": {
    "color": "primaryText",
    "bg": "primary",
    "&:hover": {
      "color": "primaryText"
    }
  },
  "secondary": {
    "color": "secondaryText",
    "bg": "secondary",
    "&:hover": {
      "color": "secondaryText"
    }
  },
  "black": {
    "color": "blackText",
    "bg": "black",
    "&:hover": {
      "color": "blackText"
    }
  },
  "grey": {
    "color": "greyText",
    "bg": "grey",
    "&:hover": {
      "color": "greyText"
    }
  },
  "white": {
    "color": "whiteText",
    "bg": "white",
    "&:hover": {
      "color": "whiteText"
    }
  },
  "info": {
    "color": "infoText",
    "bg": "info",
    "&:hover": {
      "color": "infoText"
    }
  },
  "success": {
    "color": "successText",
    "bg": "success",
    "&:hover": {
      "color": "successText"
    }
  },
  "warning": {
    "color": "warningText",
    "bg": "warning",
    "&:hover": {
      "color": "warningText"
    }
  },
  "error": {
    "color": "errorText",
    "bg": "error",
    "&:hover": {
      "color": "errorText"
    }
  },
  "disabled": {
    "cursor": "normal",
    "color": "grey",
    "bg": "accent",
    "&:hover": {
      "color": "grey",
      "bg": "accent"
    }
  },
  "transparent": {
    "cursor": "normal",
    "color": "inherit",
    "bg": "transparent",
    "&:hover": {
      "color": "inherit",
      "bg": "transparent"
    }
  },
  "gradient": {
    "color": "white",
    "backgroundColor": "chrome",
    "border": "1px solid",
    "borderColor": "chromeMuted",
    "borderRadius": "md",
    "px": 5,
    "py": 1,
    "fontFamily": "sans",
    "fontWeight": "light",
    "fontSize": "inherit",
    "lineHeight": "normal",
    "textDecoration": "none",
    "display": "flex",
    "gap": 1,
    "alignItems": "center",
    "&>span": {
      "mx": 3
    },
    "&:hover": {
      "color": "chrome",
      "backgroundColor": "#ffffff",
      "backgroundImage": "none",
      "border": "1px solid",
      "borderColor": "chrome"
    }
  }
}