Warp Design System

Appearance

Link - Styling ​

Link component to use when creating links that look like buttons.

AndroidreleasedElementsreleasedReact 19released

Layout and spacing ​

A link labeled “Explore” followed by an external link icon. A dashed red measurement line indicates 4px spacing between the text and the icon.
Ensure a 4px spacing between the text link and the trailing icon.
A long hyperlink reading “Link with a very long link text with icon. Extra long text. Looooooooong.” wraps across multiple lines within a container. The trailing external link icon is vertically centered beside the text block.
When the link text exceeds its container, it should wrap to the next line. The icon remains vertically aligned in the centre of its container.

Color ​

Text/Link is the default color token available for links. Alternatively, you can use Text/Default on navigation elements, such as header and footer.

ElementFigma token
TextSemantic/Typography/Text/Link
Text (navigation only)Semantic/Typography/Text/Default
IconSemantic/Color/Icon/Primary

Typography and sizing ​

There are four sizes available for links: preamble, body, caption and detail. Sizing applies to both standalone and inline links. Inline link sizes should match the type size of the text it is inline with. Standalone link sizes should match the default body copy size of the page.

Text styleFigma tokenFont-sizeLine-heightIcon sizeExample
Preamble LinkSemantic/Typography/Preamble20px26px24px
Body LinkSemantic/Typography/Body16px22px16px
Caption LinkSemantic/Typography/Caption14px18px16px
Detail LinkSemantic/Typography/Detail12px16px–

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system