@lg-chat/rich-links v3.0.0

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:

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>