Links navigate users to a different page, section, or external page. They can be used as a standalone element or within body text and should not exceed more than a few words.
When to use a Link vs a Button
Links and Buttons serve different purposes in the interface, and choosing the right one helps create clear, predictable, accessible experiences.
- Links are for navigation, e.g., moving to a different page, section, or external page. Use a link when the primary outcome is directing the user to a new location rather than performing an action within the current context.
- Buttons are used for anything that triggers an event or performs an in-page action, e.g., submitting a form, opening a modal/drawer/dialog, saving changes, etc.
Using the correct element helps users understand what will happen when they interact with it, improving clarity, usability, and accessibility. It also keeps implementation simple, since you won’t need to override default behavior to make the component work. If the Button or Link components don’t meet your needs, please reach out to #team-frontend-foundations-requests.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Label |
Concise description of link, no more than a few words. |
No |
|
2. Trailing icon |
Customizable icon following the label. |
Yes |
|
3. Leading icon |
Customizable icon preceding the label. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| size Variant | xSmall | small | medium | large | large |
| state Variant | rest | hover | rest |
| weight Variant | bold | normal | bold |
| ✏️ labelText Text | string | Label |
| hasIconLeading Boolean | true | false | false |
| hasIconTrailing Boolean | true | false | false |
External links
An external link directs users to an external page outside of the Octopus Deploy app, such as docs or the marketing website. Currently, this also includes links to the Control Centre.
The link is recognised as external by its trailing external link icon (ArrowUpRightFromSquareIcon).
Styling a Link as a Button
In the rare case that you need to style a Link as a Button, such as directing to another internal page to add an Octopus entity like a Git Credential, use the Link variant of Button (see in Storybook).
Component dependencies
This component is internally dependent on the following components:
Related components
Help and support