rich-links

Rich Links

View on MongoDB.design

Installation

Yarn

yarn add @lg-chat/rich-links

NPM

npm install @lg-chat/rich-links

Properties

Base Properties

All RichLink components support the following props:

Prop	Type	Description	Default
children	string	The text that shows on the rich link
imageUrl	string?	A URL for the background image of the rich link
variant	Variant	Render as a built-in Rich Link Variant
badgeGlyph	GlyphName	A @leafygreen-ui/icon glyph to show in the badge
badgeLabel	string | React.ReactNode	A string or component to show in the badge
badgeColor	"green" | "gray" | "blue" | "purple" | "red" | "yellow"	The background color of the badge	"gray"
...anchorProps	HTMLAnchorElement?	Additional props to spread on the anchor element

Variants

You can choose from a set of pre-defined variants for a specific use case. For example, the "Docs" variant has a specific color and badge text to ensure consistency across all documentation links.

To use a variant, specify it in the variant prop.

<RichLink href="https://www.example.com" variant="Website">
  Example Link
</RichLink>

The following variants are supported:

• "Blog"
• "Code"
• "Book"
• "Docs"
• "Learn"
• "Video"
• "Website"

Custom Badge

If an existing variant does not meet your use case, you can define a custom badge instead. To use a custom badge, omit the variant prop and instead define the badge props:

<RichLink
  href="https://www.example.com"
  badgeGlyph="ArrowRight"
  badgeLabel="My Link"
  badgeColor="blue"
>
  Example Link
</RichLink>