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
npx sdaia-ui@latest add source-reference
import { SourceReference } from "sdaia-ui"1<SourceReference2variant="brand"3title="Cross-Border Privacy Policy Framework (2026)"4url="compliance.org/framework-2026"5href="https://compliance.org/framework-2026"6/>
A raised surface with a transparent leading button — the default style.
Loading demo: source-reference-brand
A subtle surface with a solid black leading button.
Loading demo: source-reference-neutral
A transparent surface with an outlined leading button.
Loading demo: source-reference-outline
Hide the URL line with showUrl={false}, or the leading button with showButton={false}.
Loading demo: source-reference-toggles
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 |