Paste

Design System

Anchor

Twilio's Anchor component

Status
beta
Version
1.0.1
Sources
Storybook
Install
yarn add @twilio-paste/anchor

Guidelines#

About anchors#

The anchor can be used to hyperlink to another URL. It accepts both internal and external URLs.

Example use cases may include:

  • Linking to another page within an app or website
  • Linking to an external domain outside of the current app or website

Anchor vs. Button#

Anchors should be used in place of a button if you only need to create a hyperlink to some other page or content. Anchors should not be used for submitting a form, closing a modal, moving to the next step in a flow, or any other click action that a button should handle. Buttons perform an action, like submitting a form; Anchors take you somewhere, like to the documentation page.

If you need a click handler, you can use our Button component.

Accessibility#

The anchor is built with standard accessible practices in mind. Those include an href attribute, link context, and opening and closing tags.

The title attribute was not included because it’s not exposed to all browsers in an accessible way, meaning most screen readers and touch-only devices will likely never see that information.

Examples#

Default Anchor#

The default anchor is a basic text hyperlink. There are no other anchor variants at this time.

External Anchor#

If an external URL is used for the href, the target and rel will automatically be updated to:

target=”_blank” rel=”noreferrer noopener”

This is done for security purposes. Even though the target and rel are set by default for external anchors, they can be overridden using the target and rel props.

When to Use an Anchor#

You can use an anchor to navigate the user to another webpage.

Do

Anchors should only be used to link to another page, app, or another website.

Don't

Don’t use an anchor where a button makes more sense, i.e., closing a modal.


Usage Guide#

API#

Installation#

yarn add @twilio-paste/anchor

Usage#

import {Anchor} from '@twilio-paste/anchor';
<Anchor href="https://paste.twilio.design">Go to Paste</Anchor>;

Props#

PropTypeDescriptionDefault
href?stringA URL to route to. Required.null
tabindex?AnchorTabIndexes'0', '-1'null
target?AnchorTargets'_self', '_blank', '_parent', '_top'. If external href, defaults to '_blank'. Can be overwritten.null
rel?stringSets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten.false
onClick?(event: React.MouseEvent<HTMLElement>)null
onFocus?(event: React.FocusEvent<HTMLElement>)null
onBlur?(event: React.FocusEvent<HTMLElement>)null

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.1 (2019-11-12)

Bug Fixes#

1.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • enable theme switching on the docsite (#124) (df797e5)

BREAKING CHANGES#

  • icons: removed all the inherited icons since we're moving to a new system

  • chore(icons): update icon list for storybook

  • fix(spinner): use new icon

  • fix(storybook): use new icon for story

  • fix(story): button icons should be 24px

  • fix: adjust icon size tokens

  • feat: add iconSizes as separate key in theme-tokens

  • feat(icons): icons package to use tokens and update icons

  • fix(spinner): update to use tokens and new icons

  • fix(button): use correct spinner size

  • fix(icons): major icons package fixes

  • huge overhaul to build process
  • now uses rollup
  • builds into cjs and esm directories
  • made the package publishable to npm
  • moved svg folder out of src, now src only holds react stuff
  • updated scripts to use new paths and cleaned up the code
  • programmatically generates rollup config from the icon-list command
  • chore: add new icons dist folders to gitignore

  • fix: spinner and button icon usage

  • feat(icons): add rollup icon list cache file

  • fix(core-bundle): sort packages for consistent builds

  • chore: use esm instead of es in rollup for correctness

  • chore: yarn.lock

  • fix(spinner): lint error

  • chore(icons): move rollup icon list

  • chore(spinner): use types package in story

  • fix(spinner): swap out destructured props for explicit props

0.2.1 (2019-10-31)

Bug Fixes#

0.2.0 (2019-10-29)

Features#

  • website: SiteLink Component, replace Link with SiteLink (#135) (1295a33)
  • upgrading to styled-system v5 (#18) (2b3ebd8)

0.1.5 (2019-09-16)

Bug Fixes#

  • anchor: set children as non-nullable, remove child null error (#91) (1c6d6c5)

0.1.4 (2019-08-15)#

Bug Fixes#