monday-ui-react-core/src/components/Link/__stories__/Link.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import Link from "../Link.tsx";
import { ExternalPage, Gallery } from "../../Icon/Icons";
import { BREADCRUBMS, BUTTON, BADGE } from "../../../storybook/components/related-components/component-description-map";
import { TipButton } from "./Link.stories.helpers";
import * as LinkStories from "./Link.stories";

<Meta of={LinkStories} />

# Link

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Link is an actionable text component with connection to another web pages.

<Canvas of={LinkStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Use links only as part of the text or scentence.",
    "Use links in order to redirect people outside of the system.",
    "Links should be short with a clear action name. read more, go to, etc..."
  ]}
/>

<TipButton />

## Variants

### States

<Canvas of={LinkStories.States} />

### Right to left

<Canvas of={LinkStories.RightToLeft} />

### With icons

<Canvas of={LinkStories.WithIcons} />

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <Link text="Read more" href="https://www.monday.com" />,
        description: "Keep the copy short and to the point."
      },
      negative: {
        component: <Link text="Go to this url and read all about it" href="https://www.monday.com" />,
        description: "Don’t write long messages that are clickable."
      }
    },
    {
      positive: {
        component: (
          <Link
            text="Read more"
            iconPosition={Link.iconPositions.START}
            href="https://www.monday.com"
            icon={ExternalPage}
          />
        ),
        description: "Use icon from the left or right side of the link"
      },
      negative: {
        component: [
          <Link icon={Gallery} iconPosition={Link.iconPositions.END} />,
          <Link icon={ExternalPage} text="Read more" iconPosition={Link.iconPositions.END} />
        ],
        description: "Don’t use two icons for one link."
      }
    },
    {
      positive: {
        component: <Link text="Read more" href="https://www.monday.com" />,
        description: "Use only one link in context in text"
      },
      negative: {
        component: [
          <Link text="Read this" href="https://www.monday.com" />,
          <span class="monday-storybook-link_text">or</span>,
          <Link text="this" href="https://www.monday.com" />,
          <Link text="Nice article" href="https://www.monday.com" />
        ],
        description: "Don’t use multiple links near each other"
      }
    }
  ]}
/>

## Use cases and examples

### Reference link

Use this menu to allow a user to either select one or more items from the list.

<Canvas of={LinkStories.ReferenceLink} />

### Shortening texts

Use read more to shorten long paragraphs of text

<Canvas of={LinkStories.ShorteningTexts} />

## Related components

<RelatedComponents componentsNames={[BUTTON, BREADCRUBMS, BADGE]} />