buttons.mdx

title	tags	redirects
Buttons	Basic style guide Style guide quick reference	/docs/style-guide/quick-reference/buttons/ /docs/style-guide/formatting/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 role="button" to="https://one.newrelic.com/launcher/nr1-core.home?pane=eyJuZXJkbGV0SWQiOiJucjEtY29yZS5ob21lLXNjcmVlbiJ9&cards%5B0%5D=eyJuZXJkbGV0SWQiOiJucjEtaW5zdGFsbC1uZXdyZWxpYy5ucjEtaW5zdGFsbC1uZXdyZWxpYyIsImFjdGlvbkluZGV4IjoxfQ==" variant="primary"

Click me!

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:

  <th>
    Description
  </th>
</tr>

  <td>
    The function of the component. Use the value `button`.
  </td>
</tr>

<tr>
  <td>
    `to`
  </td>

  <td>
    The button's URL.
  </td>
</tr>

<tr>
  <td>
    `variant`
  </td>

  <td>
    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.
  </td>
</tr>

Field
`role`

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.

Button text Button one

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

Button two

<ButtonLink role="button" to="https://docs.newrelic.com" variant="secondary"

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>