COMPONENTS / ATOMS / al-logo← ALL COMPONENTS

Logo

<al-logo><ALLogo> REACTbeta

Reference generated from the custom elements manifest — 3 properties, 1 slots, 0 events.

PLAYGROUND0 CONTROLS
PREVIEW / al-logo / SOUTHLEFT
Loading preview
By Southleft
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
FIGMA AHEADSouthleft Design SystemFIGMA SET · Logo
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
3 ATTR · 1 SLOT · 0 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXElogo--DefaultPASS
Advanced statesAXE1 further storyPASS
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
MEASURED 2026-09-08 · 2 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
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 2 STORIES.
INSTALL@southleft/al-web-components/components/logo
import '@southleft/al-web-components/components/logo';
import { ALLogo } from '@southleft/al-react';
API — 3 PROPS3 DOCUMENTED
PROPTYPEDEFAULT
variant'southleft'The logo variant
- **default** displays the Altitude logo
- **southleft** displays the Southleft logo—
hrefstringThe logo link URL'/'
labelstringA11y — the accessible name of the logo mark.

The logo renders an inline `<svg>` inside an `<a>`; an `<svg>` with no
`role`/name contributes nothing to name-from-content, so the link was
nameless (axe `link-name`). Defaults to the wordmark the variant draws.—
SLOTS1
SLOTDESCRIPTION
(default)The component content
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
SOURCE — components/logo/logo.ts · Atoms/Logo