Anchor

What is this?

Anchor actions allow merchants to navigate inside a page or between pages through inline triggers.

Example

Loading...

Installation

yarn add @vtex/admin-ui

import { Anchor } from '@vtex/admin-ui'

Customization

You can use the className property to customize any style.

Loading...

Props

Name	Type	Description	Required	Default
children	ReactNode	Component children	🚫	-

The Anchor component also has all anchor HTML attributes.

Components

When to use a Button, a Tab or a Menu instead of an Anchor?

• Choose a Button if the action is not positioned in a text, requires higher visual prominence, or triggers a process such as submitting a form. Only choose a Button for a navigation action when it is in the header of a Card, Modal or Page.
• Choose a Tab if the the purpose of the action is to navigate within a container and the different views are mutually exclusive, meaning that only one view can be visible at a time.
• Choose a Menu if the action is rarely used or is repeated for each item in a list, even when the purpose of the action is to simply navigate.

Variants

What should be the action of an Anchor?

Anchors are usually for navigation to other pages, but depending on the context, they can be used for other purposes. All the technically supported possibilities are listed below:

• Navigate to another page.
• Navigate to a specific section of another page.
• Navigate to highlighted text on another page.
• Navigate to another section of the current page.
• Open the default email client with pre-filled content.
• Dial a number in the default telephone app.

What to avoid:

• Don't use an Anchor to download a file, prefer using a Button.
• Don't use an Anchor to expand or collapse content, prefer using a Button.

When should an Anchor open in the same tab or in another tab or window?

• When in doubt, avoid opening an Anchor in a new tab. Since there are keyboard shortcuts to achieve this behavior, setting this behavior as default takes away the merchant’s choice.
• Open an Anchor in another tab when it leads outside the VTEX Admin, such as to documentation or to a partner’s website. Also, open in a new tab to avoid interrupting a process in the current tab, such as filling in a form or watching a video.

What should be the text formatting in an Anchor?

• Anchors use by default the $body token with a predefined weight and size. An underline appears only on hover, and color tokens for tertiary actions are used.

What to avoid:

• Don’t position an Anchor in the header or footer of a container, prefer to use a Button instead.

Position

What should be the position of an Anchor in a container?

• An Anchor should always be positioned inline, either in the middle of a paragraph or immediately at the end.

What to avoid:

• Don’t position an Anchor in the header or footer of a container, prefer to use a Button instead.

Behavior

What should be the behavior of an Anchor after it is clicked?

• When merchants might find it useful to know if they have clicked on a link before, such as when searching through a list of links, change the Anchor color to indicate that it has been visited.
• Once an Anchor is visited, it is registered in the browser history and continues to display the visited state until this history entry is cleared.

What to avoid:

• Don't customize the color of a visited Anchor, maintain the $fg.action.tertiaryPressed token to ensure that merchants can easily recognize visited links.

Content

What should be the text of an Anchor?

• If the link is within a paragraph, the capitalization should not be modified, it should not start with a verb and the words should define the content that will be visited.
• If the link is at the end of a paragraph, it should be in sentence case and start with a verb, such as Learn more or View details.

What to avoid:

• Don’t use more than three words in an Anchor.
• Don’t use the verb See. Prefer using View

• What is this?