Buttons are a type of call to action (CTA) that can be either neutral (gray), affirmative (green), destructive (red), or outlined for less emphasis.

Button

Buttons allow users to take actions, and make choices, with a single tap.

The component or HTML Element that the button is rendered as.

To use with NextJS Links, pass in a component that wraps the Link:
```js
const Linker = ({ href, children, ...props }) => (
 <NextLink href={href}>
   <a {...props}>{children}</a>
 </NextLink>
);
<Button as={Linker} />
```

HTMLElement | React.Component

Determines the base font-size of the component

baseFontSize

enum

The content that will appear inside of the `<Button />` component.

children

Specifies a CSS class passed to the element.

className

string

Determines if the component renders in dark mode

darkMode

Determines whether the button element will be disabled.

disabled

A `href` prop that will make the Button render as an anchor tag.

href

An icon glyph rendered before the button text.
To use a custom icon, see {@link Icon } {@link https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets | createIconComponent} docs

leftGlyph

Leafygreen <Icon /> Component

Callback fired when the button is clicked

onClick

MouseEventHandler<HTMLButtonElement>

An icon glyph rendered after the button text.
To use a custom icon, see {@link Icon } {@link https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets | createIconComponent} docs

rightGlyph

size

Specifies the `type` property of the HTML button element