Inline Citation

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import InlineCitation from @prepared911/ui/inline-citation. Props are a union: static, or a link.

Prop	Type	Default	Notes
`label`	`LocalizedMessage`	required	The chip text, composed by the caller
`href`	`string`		Makes the chip a link that opens in a new tab
`newTabLabel`	`LocalizedMessage`	required with `href`	Announced after the chip text
`className`	`string`		Appended after the generated classes
`ref`	`Ref<HTMLSpanElement>` static, `Ref<HTMLAnchorElement>` linked

data-* attributes pass to the Badge or the anchor. Reserved design-system state names are dropped with a warning. newTabLabel without href is a type error.

Exports

InlineCitation and the type InlineCitationProps.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	The chip's visible text, composed by the caller: the citation number alone ("1"), or the number with the source title ("2 · Layout guide"). The chip is one Badge, so the text is one string and truncates as a unit.
`className`	`string`	—	Classes appended after the generated classes.
`href`	`string`	—	No destination. The source URL. The link opens in a new tab with `rel="noopener noreferrer"`.
`newTabLabel`	`LocalizedMessage`	—	Not allowed without `href`. Announced after the chip text, such as "Opens in a new tab".
`ref`	`((instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<HTMLSpanElement \| null> \| ((instance: HTMLAnchorElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<...> \| null`	—	Ref to the chip. Ref to the anchor.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Inline Citation / Usage

Inline Citation / Accessibility

On this page

Exports

Props

Storybook

Inline Citation

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import InlineCitation from @prepared911/ui/inline-citation. Props are a union: static, or a link.

Prop	Type	Default	Notes
`label`	`LocalizedMessage`	required	The chip text, composed by the caller
`href`	`string`		Makes the chip a link that opens in a new tab
`newTabLabel`	`LocalizedMessage`	required with `href`	Announced after the chip text
`className`	`string`		Appended after the generated classes
`ref`	`Ref<HTMLSpanElement>` static, `Ref<HTMLAnchorElement>` linked

data-* attributes pass to the Badge or the anchor. Reserved design-system state names are dropped with a warning. newTabLabel without href is a type error.

Exports

InlineCitation and the type InlineCitationProps.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	The chip's visible text, composed by the caller: the citation number alone ("1"), or the number with the source title ("2 · Layout guide"). The chip is one Badge, so the text is one string and truncates as a unit.
`className`	`string`	—	Classes appended after the generated classes.
`href`	`string`	—	No destination. The source URL. The link opens in a new tab with `rel="noopener noreferrer"`.
`newTabLabel`	`LocalizedMessage`	—	Not allowed without `href`. Announced after the chip text, such as "Opens in a new tab".
`ref`	`((instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<HTMLSpanElement \| null> \| ((instance: HTMLAnchorElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<...> \| null`	—	Ref to the chip. Ref to the anchor.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Inline Citation / Usage

Inline Citation / Accessibility

On this page

Exports

Props

Storybook