Warp Design System

Appearance

Link ​

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

React 19betaAndroidreleased

A link is interactive text that serves as a lightweight navigational element. It directs users to another location, such as a different website, a specific section on the same page, or an external resource.

See the component in Figma: Warp - Components / Link

Related components: Button

Example ​

Variants ​

Text link ​

Text link example
This is the default and recommended link variant. It renders as hyperlinked text and can be used either as a standalone element or inline within a block of text.

Button styled ​

Button styled link example
Alternative variant in which the link is visually styled as a button (web only). This variant is not recommended, but it is still available in Warp for legacy support.

Anatomy ​

A visual diagram of a text link with two labeled parts. The link reads “This is a link” and has a trailing external link icon. Label 1 points to the underlined blue hyperlink text, while Label 2 points to the trailing icon. Below the diagram, a legend explains: Hyperlinked text/text link: Communicates what is being linked to. Trailing icon: Visual indicator that reinforces the purpose of the text link (optional).

  1. Hyperlinked text/text link: Communicates what is being linked to.
  2. Trailing icon: Visual indicator that reinforces the purpose of the text link (optional).

Questions? ​

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