Перейти до вмісту

⚠️ Link button demo page ⚠️

Цей контент ще не доступний вашою мовою.

Basics

The following examples are basic link buttons.

Primary (explicit)

Primary (implicit)

Secondary

Minimal

And some text after the links.

Icons

The following examples are link buttons with icon after the text (default).

Primary

Secondary

Minimal

The following examples are link buttons with icon before the text (using the iconPlacement="start").

Primary

Secondary

Minimal

The following examples are link buttons with icon after the text (using the iconPlacement="end")

Primary

Secondary

Minimal

The following examples are link buttons with only an icon and an aria-label.

The following example is a link button with only an icon using the <Icon> component with a size specified by the user and an aria-label.

Custom class

The following examples are link buttons with a custom class that changes some styles.

Primary

Secondary

Minimal

Long text

The following examples is a link button with a very long text in it.

This is a very very very very very very very very long text

Interleaved content

The following example are 2 link buttons with a code block in between.

Primary

console.log('some content in between');

Secondary

Markdown content

The following example is a link button with markdown content in it.

Primary in italic

RTL

The following examples are link buttons in a block in RTL where the icon is before the text.

The following examples are link buttons in a block in RTL where the icon is after the text.

The following example is a link button in RTL where the icon is before the text.

Primary

The following example is a link button in RTL where the icon is after the text.

Primary

Asides

The following examples are asides with link buttons.

Tabs

The following examples are tabs with link buttons.

Star 1

Star 2

Star 3

Cards

The following example is a card with a link button.

The following examples are cards in a grid with link buttons.

Steps

The following example is a link button in a step.

  1. Do something

  2. Step two has some more information with link buttons

    Primary

    Secondary

    Minimal

  3. And finally do something else