Links & buttons

Both :link and :button are text directives. Use a link for inline navigation and a button when you want a call-to-action, a console deep link, or a download.

Properties: href (string, target URL), external (boolean, adds an external icon and opens in a new tab when href is set, default false), target (string, e.g. _blank), action (navigate | download, default navigate).

Rendered:

Example link

AWS UI Docs 

Source:

1
2
3
:link[Example link]{href="/"}

:link[AWS UI Docs]{href="https://github.com/aws/awsui-documentation" external=true}

Rendered:

Download the placeholder image !

Source:

1
Download the :link[placeholder image]{href="/static/images/placeholder.svg" action=download}!

A regular Markdown link opens in a new tab automatically when the href starts with http:// or https://.

Source:

1
Link to the [Workshop Studio catalog](https://catalog.workshops.aws/).

Properties: variant (normal | primary | link | icon | inline-icon, default normal), iconName (icon to show), iconAlign (left | right, default left), href (styles a link as a button), target (e.g. _blank, only with href), action (navigate | download, default navigate), disabled (boolean, default false), wrapText (boolean, default true).

Rendered:

Basic button

Source:

1
:button[Basic button]

Rendered:

Normal Primary Link

Source:

1
2
3
4
5
:button[Normal]
:button[Primary]{variant="primary"}
:button[Link]{variant="link"}
:button[]{variant="icon" iconName="settings"}
:button[]{variant="inline-icon" iconName="copy"}

Rendered:

Left aligned Right aligned

Source:

1
2
:button[Left aligned]{iconName="copy"}
:button[Right aligned]{iconName="external" iconAlign="right"}

Style a link as a button and open it in a new tab. Console links should be region-agnostic.

Rendered:

Open EC2 console

Source:

1
:button[Open EC2 console]{target="_blank" href="https://console.aws.amazon.com/ec2/home#Home" variant="primary" iconName="external" iconAlign="right"}

Rendered:

Download the placeholder image

Source:

1
Download the :button[placeholder image]{href="/static/images/placeholder.svg" action=download}