Link
Text that goes somewhere: in a sentence, or on its own ("View all invoices"). An <a href>; a <button> can look like one when it does something from inside text. It takes the text's font and size. Specification: docs/components/link.md
Basics
class="canon-link" on an <a href>. In a sentence it is underlined, so it shows by more than its color.
Payments arrive within two working days. See how payouts work or change your bank details.
Standalone
data-standalone on a link that stands on its own, outside a sentence: under a list, in a card, in a table cell. Its place says it's a link, so the theme may drop the underline until hover or focus. An icon (aria-hidden="true") can go before or after the text.
Low emphasis
data-emphasis="low": the surrounding text's color, always underlined. For links that shouldn't draw the eye: a footer, fine print, a muted description.
By signing up you agree to the terms of service and the privacy policy.
New tab
target="_blank": the theme draws the external icon after the text, and screen readers hear "(opens in new tab)" (the --canon-text-opens-in-new-tab string, translated by i18n/). Open a new tab only when leaving would lose the person's work.
Rates follow the central bank's published rates.
On a button
When it does something rather than going somewhere, from inside text, it is a <button type="button" class="canon-link">: it looks like a link and behaves as a button (Enter and Space, no address). Anywhere else, use a Button.
Didn't get the code? .
States
Hover and keyboard focus are live. A button link is disabled with disabled; a link that can't go anywhere loses its href and gets aria-disabled="true".
Edge cases
A long link wraps with the text, and its focus ring follows each line. A link takes the size of the text it's in. Right to left, icons that point mirror, the new-tab icon too.
Before you continue, read the complete guide to moving your workspace between regions once.
Questions? Ask the team
Updated today · See history
راجع دليل المدفوعات أو صفحة الحالة. عرض الكل