1.2.0 • Published 10 months ago

@lg-chat/rich-links v1.2.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

Rich Links

npm (scoped)

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:

PropTypeDescriptionDefault
childrenstringThe text that shows on the rich link
imageUrlstring?A URL for the background image of the rich link
variantVariantRender as a built-in Rich Link Variant
badgeGlyphGlyphNameA @leafygreen-ui/icon glyph to show in the badge
badgeLabelstring \| React.ReactNodeA string or component to show in the badge
badgeColor"green" \| "gray" \| "blue" \| "purple" \| "red" \| "yellow"The background color of the badge"gray"
...anchorPropsHTMLAnchorElement?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>