• EnglishEspañol日本語한국어Português
  • Log inStart now

Buttons

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.

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.

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>;
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.