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 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 |
|---|---|
| Use the value |
| The button's URL. |
| Use the value For alternate button style, use |
Button variations
If you need it, you can put two or more buttons in a row. Simply include additional ButtonLink content 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>For more help
If you need more help, check out these support and learning resources:
- Browse the Explorers Hub to get help from the community and join in discussions.
- Find answers on our sites and learn how to use our support portal.
- Run New Relic Diagnostics, our troubleshooting tool for Linux, Windows, and macOS.
- Review New Relic's and and documentation.