Skip to main content

ns-action-link

Introduction#

Action links are decorative links used to navigate to another page or perform an action.

Action links are used to navigate to another page or perform an action. They are used to support the main actions on a page. It is expected that action links are grouped together and are not used in isolation.

These are more decorative links and can have illustrations to help convey the action.

Content guidance#

The following content guidance applies to both types of the component.

Action link

KeyField typeGuidelines
ALabelKeep the text 'short, relevant, and actionable'. It should not exceed more than 24 characters.
BIllustrationThis is a decoration. It is intended to provide a visual aid to the link. The specification table has a list of options.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Dont's
Make it short and actionableMake it vague
Add illustrationsMake it overly wordy
Relate the action to the content it sits besideTreat as a button
Use more than 24 characters
Link to outside urls
Use for downloads. Use the ns-download component instead

Considerations of best practice#

Usage#

Standard#

View example on Storybook

Stacked#

View example on Storybook

Component placement#

The ns-action-link component can only be used in the ns-column component.

Specification#

AttributePropertyTypeDefaultOptionsDescription
typetypestringstandardstandard, stacked,Different variants of the action link.
hrefhrefstringNavigating using a hyperlink.
labellabelstringThe text inside the link.
decorationdecorationstring``See ns-illustration componentThe illustration inside the link.

Specification notes#

Href#

The only ability to change the link is via the href attribute. This means that the link will by default open in the same tab.

Label#

Only strings are allowed inside the label. This means that HTML cannot be used.

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.