Anchor

リンクを作成するアンカーコンポーネント。

インストール

import { Anchor } from "@ginga-ui/core";

基本的な使い方

シンプルなリンクの使用例です。

リンクをクリック

export function BasicExample() {
  return <Anchor href="https://example.com">リンクをクリック</Anchor>;
}

外部リンク

外部サイトへのリンクを新しいタブで開きます。

GitHubで開く(新しいタブ)

export function ExternalExample() {
  return (
    <Anchor href="https://github.com/newt239/ginga-ui" target="_blank">
      GitHubで開く(新しいタブ)
    </Anchor>
  );
}

無効化

disabledプロップでリンクを無効化できます。

通常のリンク無効化されたリンク

export function DisabledExample() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <Anchor href="https://example.com">通常のリンク</Anchor>
      <Anchor href="https://example.com" disabled>
        無効化されたリンク
      </Anchor>
    </div>
  );
}

ボタンスタイル

ボタンのようなスタイルでリンクを表示します。

デフォルトリンクボタンスタイルのリンク

export function ButtonVariantExample() {
  return (
    <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
      <Anchor href="https://example.com">デフォルトリンク</Anchor>
      <Anchor href="https://example.com" variant="button">
        ボタンスタイルのリンク
      </Anchor>
    </div>
  );
}