Button

v9.8.3 Edit this page
Loading...

Usage

Loading examples...

Props

<Button>

Name

Description

Type

Default

children

node

block

Changes the button to `display: block`, making it go full width.

bool

false

className

Applies a CSS classname to the component.

string

null

component

Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.

string

null

disabled

Renders a button as disabled, making it non-interactable.

bool

false

loading

Renders a button loading visual state.

bool

false

primary

Renders a button with the highest visual affordances.

bool

false

tertiary

Renders a button with the tertiary visual affordances.

bool

false

dangerouslyForceHoverStyling

Force the component to use its hover styles.

bool

false

dangerouslyForceFocusStyling

Force the component to use its focus styles.

bool

false

dangerouslyForceActiveStyling

Force the component to use its active styles.

bool

false

Buttons That Look Like Links

You often want a button that looks like a link, or vice-versa a link that looks like a button. The <Button> and <Link> components can be used interchangeably, and which one you use should be determined by what you want it to look like. Both components can render either <a> or <button> tags depending on the props used (href vs onClick), ensuring you get both the right styling and the right dom elements for semantics and accessibility.

  • Use this component (<Button>) when you want something that looks like a button.
  • Use <Link> when you want something that looks like a link.

Props

In addition to props defined by this component, any props <button> and <a> take are also accepted.

Maintainers

This component is maintained by the FEI team.