Button

v9.6.0Edit this page

Buttons signify important actions a person can take. This component is a stateless wrapper around <button> or <a>, providing button visual styling.

Usage

Loading...

Loading examples...

Props

<Button>

Name

Description

Type

Default

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

primary

Renders a button with the highest visual affordances.

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.

See Also