1.2.0 • Published 10 months ago
@lg-chat/rich-links v1.2.0
Rich Links
View on MongoDB.design
Installation
Yarn
yarn add @lg-chat/rich-linksNPM
npm install @lg-chat/rich-linksProperties
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>