• /
  • ログイン
  • 無料アカウント

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.

Click me!

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

role

Use the value button.

to

The button's URL.

variant

Use the value primary.

For alternate button style, use secondary

Button variations

If you need it, you can put two or more buttons in a row. Simply include additional ButtonLink content 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 © 2022 New Relic Inc.