Link
Link is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs.
<Link href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB">
ドラゴンボール - wikipedia
</Link>
Usage
import { Link } from "@yamada-ui/react"
import { Link } from "@/components/ui"
import { Link } from "@workspaces/ui"
<Link />
Change variant
<Wrap gap="md">
<For each={["plain", "underline"]}>
{(variant) => (
<Link
key={variant}
variant={variant}
href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
>
ドラゴンボール - wikipedia
</Link>
)}
</For>
</Wrap>
Change Color Scheme
<Wrap gap="md">
<For each={["success", "warning", "link"]}>
{(colorScheme) => (
<Link
key={colorScheme}
colorScheme={colorScheme}
href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
>
ドラゴンボール - wikipedia
</Link>
)}
</For>
</Wrap>
External Links
<Link
href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
external
>
ドラゴンボール - wikipedia
</Link>
Props
Similar Components
Blockquote
Blockquote is a component that represents a quotation. By default, it renders a blockquote element.
Code
Code is a component that represents a code block. By default, it renders a code element.
Em
Em is a component that represents emphasized text. By default, it renders a em element.
Heading
Heading is a component that represents section headings. By default, it renders an h1 element.
Highlight
Highlight is a component that highlights specified strings within text. By default, it renders a p element.
Kbd
Kbd is a component that represents keyboard input.
Mark
Mark is a component that emphasizes a specific part of the text.
Text
Text is a component that represents a paragraph of text. By default, it renders a p element.