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.

Button breakdown

Buttons are created with the <Button> component.

<Button role="button" to="Button URL" variant="primary">
  Click me!
</Button>;

The component has three props:

Field	Description
`role`	The function of the component. Use the value `button`.
`to`	The button's URL.
`variant`	The style of the button. Use the value `primary`, which sets the button to green. For an alternative button style, use `secondary`, which makes the button look like a link.

Field

Description

role

The function of the component. Use the value button.

to

The button's URL.

variant

The style of the button. Use the value primary, which sets the button to green.

For an alternative button style, use secondary, which makes the button look like a link.

Button variations

If you need it, you can put two or more buttons in a row with the <ButtonGroup> and <ButtonLink> components. Simply include additional ButtonLink components within ButtonGroup.

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>;