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>