MenuCaderno UI
npmGitHub
Theme

<cad-link>

Link

Navigate with blue text and a coral underline. Supports external links and downloads.

Link states

StateExampleNotesDefaultRead the contractCoral underline.InteractiveRead the contractTry hover, click, or Tab to focus.ExternalOpen in help centerThe external-link icon is decorative.DisabledUnavailable referenceGray, unfocusable, and non-interactive.
ForwardGo to rollout plan
BackBack to overview
Inline

Review the rollout plan for more details.

DownloadDownload report
DestructiveDelete this item
Primary actions with emphasisCreate new planPublish releaseApprove changesDelete permanently
aria-currentcurrentCadLinkCurrent''disableddisabledbooleanfalsedownloaddownloadstring''externalexternalbooleanfalsehrefhrefstring''labellabelstring''relrelstring''targettargetstring''tonetoneCadLinkTone'blue'variantvariantCadLinkVariant'underline'currentCadLinkCurrentaria-currentyesdisabledbooleandisabledyesdownloadstringdownloadnoexternalbooleanexternalyeshrefstringhrefnolabelstringlabelnorelstringrelnotargetstringtargetnotoneCadLinkTonetoneyesvariantCadLinkVariantvariantyes(default)Link label.endOptional trailing visual.startOptional leading visual.baseNative anchor.endTrailing composition slot.externalExternal-link indicator.startLeading composition slot.--cad-link-markPer-instance marker color.--cad-link-inkPer-instance text color.

Accessibility

Use text that describes the destination. External links receive safe target and relationship defaults. Disabled links cannot navigate and leave the tab order.

MIT licensed. Built with Caderno UI.Report an issue
Back to top