Buttons | New Relic Documentation

When you want to draw someone's attention to a link without putting it in a callout, buttons are an elegant way to do that.

Click me!

Button breakdown

Buttons are created from two React components: <ButtonGroup> and <ButtonLink>.

<ButtonGroup>
<ButtonLink
  role="button"
  to="Button URL"
  variant="primary"
>
  Button text
</ButtonLink>
</ButtonGroup>

The ButtonLink component has three fields:

Field	Description
`role`	Use the value `button`.
`to`	The button's URL.
`variant`	Use the value `primary`. For alternate button style, use `secondary`

Field

Description

role

Use the value button.

to

The button's URL.

variant

Use the value primary.

For alternate button style, use secondary

Button variations

If you need it, you can put two or more buttons in a row. Simply include additional ButtonLink content within ButtonGroup.

Button one

Button two

Secondary button

The source for those buttons looks like this:

<ButtonGroup>
<ButtonLink
  role="button"
  to="https://docs.newrelic.com"
  variant="primary"
>
  Button one
</ButtonLink>

<ButtonLink
  role="button"
  to="https://docs.newrelic.com"
  variant="primary"
>
  Button two
</ButtonLink>
<ButtonLink
  role="button"
  to="https://docs.newrelic.com"
  variant="secondary"
>
  Secondary button
</ButtonLink>
</ButtonGroup>