New to KendoReact? Start a free 30-day trial

Citation

Component

Citation is a self-contained inline source chip: it shows its own resource details popover (on hover, or keyboard activation).

Definition

Package:@progress/kendo-react-conversational-ui

Properties Interface:CitationProps

Properties

additionalCount?

boolean

Whether to show the +N additional-sources indicator next to the label, where N is sources.length - 1. Does not affect which source is used to derive the default label.

Default:

false

bodyTemplate?

ComponentType<CitationBodyTemplateProps>

A custom component that replaces the default rendering of the resource details body (title, description, URL for each source).

label?

string

Inline chip label. When omitted, derived from the first source's URL/domain.

Callback fired when the citation's resource details are about to be shown, after a click or keyboard/touch activation. This event is informational — Citation shows its own popover automatically and does not require the host to open or close anything in response.

Parameters:eventCitationOpenEvent

Example:

tsx

<Citation sources={sources} onOpen={(e) => console.log(e.sources)} />

showOn?

CitationShowOn

Specifies when the Citation popover becomes visible.

The available options are:

hover — Displays the popover when the mouse hovers over the chip.
click — Displays the popover when the chip is clicked.

Default:

'hover'

sources?

CitationSource[]

Source resources associated with the citation, in display order.

Default:

[]

svgIcon?

SVGIcon

Chip icon. Pass an icon object from @progress/kendo-svg-icons.

Default:

globeIcon