Skip to main content

Components

Anchor Text

Actionable text link for users to navigate

banner-Anchor Text

Anatomy

Anchor text usualy use text labels or a text label and icon pairing to convey an action to a user. The most important thing to consider when working with anchor text is to ensure that their appearance and placement convey their intended action clearly to a user.

banner guideline anchor
  1. Icons left or right : can consist of an icon on its own or an icon paired with a text label. Always ensure that the icon you select for your anchor text clearly communicates the action.
  2. Text labels : are the core element, text labels should be concise while effectively conveying what will occur when the anchor text is clicked.


banner guideline anchor 2

Anchor text can consist of an icon on its own or an icon paired with a text label. Always ensure that the icon you select for your anchor text clearly communicates the action. Icons paired with text labels should directly support the text label.

Alt text

Do : With icon

Use icons and text labels that support each other with use the icon only on one side only

Alt text

Don't : With multiple icon

Use icons and text labels that do not relate to one another or use multiple icons alongside a text label

Usage

Generally anchor text are supportive elements that work alongside other page elements to convey navigation to the user. Place anchor text in close proximity to the content they are supporting so that the relationship between anchor text and the content they relate to is clear.

Common places anchor text appear: Alongside body copy, Alongside images, Within cards, With navbars and breadcrumbs, Footers

When to use

  • To offer less important actions users can take.
  • To show many possible actions at once.
  • When the action is navigation inside the current app.
  • Involves an interaction (like open a modal or submitting a form).
  • With short action text.

When not to use

  • When you have a single action you want to draw attention to.
  • To make text inside paragraphs or lists actionable.
  • For navigation to external sites and services.
  • With a long call to action.
  • So users can sign in using a social service.

Accessibility

Make sure your anchor used a match color and contrast from main of your primary, seconndary or accent color, and consider of minnimum size of text label is 12px, icon 12px with margin in 12px. for accept the accecissible and touch target of users.

Alt text

Do : With margin

Provide visual distinction between surrounding body label and clickable anchor text visible with much margin

Alt text

Don't : without margin

Neglect to provide visual distinction between body copy and clickable anchor text makes distract vibility of call to action

Content

Copywriting for anchor text needs to be specific, recognizable, and only one or two words long (if possible).

  • Use action verbs: When users read an action verb, they know what the anchor will do. Especially, if it’s followed by specific connotations.
  • Use task-specific language: A generic copy cause uncertainty in users. They’re unsure what the button will do if the copy on doesn’t specify.
  • Use active imperative form: In order to make the copy concise, the active imperative form turns verb phrases into commands. We can drop the subject and articles which are not needed, and only include a verb with an adverb or direct object.
Alt text

Do : With short copy

Use the spesific copy of action in label when click the achor with help visual context from icon

Alt text

Don't : With long copy

Use to long copy in label make the label can’t represent the spesific action when the users click the anchor text