Source Reference

A linked source card used to cite a document, page, or dataset. It pairs an icon-only action button with a title, URL, and an open affordance — across Brand, Neutral, and Outline styles.

Loading demo: source-reference-real-world

Installation

npx sdaia-ui@latest add source-reference

Usage

import { SourceReference } from "sdaia-ui"

1<SourceReference
2  variant="brand"
3  title="Cross-Border Privacy Policy Framework (2026)"
4  url="compliance.org/framework-2026"
5  href="https://compliance.org/framework-2026"
6/>

Examples

Brand

A raised surface with a transparent leading button — the default style.

Loading demo: source-reference-brand

Neutral

A subtle surface with a solid black leading button.

Loading demo: source-reference-neutral

Outline

A transparent surface with an outlined leading button.

Loading demo: source-reference-outline

Optional slots

Hide the URL line with showUrl={false}, or the leading button with showButton={false}.

Loading demo: source-reference-toggles

API Reference

Prop	Type	Default	Required
variant	'brand' \| 'neutral' \| 'outline'	'brand'	optional
title	ReactNode	—	required
url	ReactNode	—	optional
showUrl	boolean	true	optional
href	string	—	optional
showButton	boolean	true	optional
icon	string	tick02Stroke	optional
onButtonClick	(e) => void	—	optional
openIcon	string	linkSquare02Stroke	optional
showOpen	boolean	true	optional
onOpen	(e) => void	—	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
as	ElementType	'div'	optional