Reference generated from the custom elements manifest — 7 properties, 2 slots, 0 events.
PLAYGROUND4 CONTROLS
PREVIEW / al-link / SOUTHLEFT
Loading preview
Text link
variant
target
FLAGS
ICON SLOTS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
BOTH CHANGEDSouthleft Design SystemFIGMA SET · Link
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
SOURCE HASH
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
7 ATTR · 2 SLOT · 0 EVENT · 0 PART
A sha1 of every .ts/.scss byte in the component directory, compared against the hash stored at the last sync. It cannot say what changed, and a comment edit moves it. Re-stamping this component records a contract digest instead.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXElink--DefaultPASS
Advanced statesAXE5 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 6 STORIES.
import '@southleft/al-web-components/components/link';
import { ALLink } from '@southleft/al-react';
API — 7 PROPS7 DOCUMENTED
PROPTYPEDEFAULT
hrefstringThe link URL—
variant'xs' | 'sm' | 'lg'Variant
- **default** renders a link with the al-theme-typography-body-md preset
- **xs** renders a link with the al-theme-typography-body-xs preset
- **sm** renders a link with the al-theme-typography-body-sm preset
- **lg** renders a link with the al-theme-typography-body-lg preset—
target'_blank' | '_self' | '_parent' | '_top'Target attribute for a link (i.e. set to _blank to open in new tab)
- **_blank** yields a link that opens in a new tab
- **_self** yields a link that loads the URL into the same browsing context as the current one. This is the default behavior
- **_parent** yields a link that loads the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self
- **_top** yields a link that loads the URL into the top-level browsing context. If there is no parent, this behaves the same way as _self.—
labelstringAria label attribute
- Optional aria-label for a11y
- Most screen readers will read out loud the aria-label attribute in place of the link text. This is used for links that have text such as 'Learn more' or 'Read more'.—
ariaLabelledBystringAria Labelled By attribute
- Optional aria-labelledby for a11y
- There may be instances where a nearby headline can act is the perfect label for a general link.—
linkTitlestringTitle attribute
- Optional title for a11y
- If a link opens a new window or performs an action, use the title attribute to provide a tooltip with additional information.—
isDisabledbooleanDisabled attribute—
SLOTS2
SLOTDESCRIPTION
(default)The link text
afterContent to display after the link text, typically an icon (an external-link or chevron affordance). The link is `inline-flex` with a `--al-theme-space-xs` gap, and each size variant re-binds `--al-icon-width` / `--al-icon-height`, so a slotted icon is sized by the variant automatically. <al-link href="/docs">Read the docs<al-icon-chevron-right slot="after"></al-icon-chevron-right></al-link>
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.