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

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 © 2020 New Relic Inc.