utsusie
プレイグラウンド一覧

InlineLabel Component

テキストのインライン要素として使用するセマンティックなラベルコンポーネント

インタラクティブデモ

リアルタイムでプロパティを変更してコンポーネントの動作を確認

設定パネル

コード例

TSX
<Text>
  サンプルテキストです。この文章内に{" "}
  <InlineLabel 
    variant="default"
    size="base"
    rounded="full"
  >
    ラベル
  </InlineLabel>{" "}
  が表示されています。
</Text>

プレビュー

サンプルテキストです。この文章内に ラベル が表示されています。

複数のラベルを 情報 成功 警告 のように連続して配置することもできます。

カラーバリアント

用途に応じた6つのセマンティックカラー

カラーバリアント使用例

TSX
// 各バリアントの使用例
<InlineLabel variant="default">デフォルト</InlineLabel>
<InlineLabel variant="success">成功・完了</InlineLabel>
<InlineLabel variant="warning">警告・注意</InlineLabel>
<InlineLabel variant="error">エラー・重要</InlineLabel>
<InlineLabel variant="info">情報・ヘルプ</InlineLabel>
<InlineLabel variant="accent">アクセント・特別</InlineLabel>

全バリアント表示

default:

このテキストは default バリアントのラベルを含んでいます。

success:

このテキストは success バリアントのラベルを含んでいます。

warning:

このテキストは warning バリアントのラベルを含んでいます。

error:

このテキストは error バリアントのラベルを含んでいます。

info:

このテキストは info バリアントのラベルを含んでいます。

accent:

このテキストは accent バリアントのラベルを含んでいます。

サイズバリエーション

テキストサイズに調和する4つのサイズ設定

サイズバリエーション使用例

TSX
// サイズに応じた使用例
<Text size="xs">極小テキストに <InlineLabel size="xs">xsラベル</InlineLabel></Text>
<Text size="sm">小テキストに <InlineLabel size="sm">smラベル</InlineLabel></Text>
<Text size="base">標準テキストに <InlineLabel size="base">baseラベル</InlineLabel></Text>
<Text size="lg">大テキストに <InlineLabel size="lg">lgラベル</InlineLabel></Text>

サイズ比較

xs:

このテキストサイズ（xs）に適した xsサイズ のラベルです。

sm:

このテキストサイズ（sm）に適した smサイズ のラベルです。

base:

このテキストサイズ（base）に適した baseサイズ のラベルです。

lg:

このテキストサイズ（lg）に適した lgサイズ のラベルです。

形状バリエーション

デザインに合わせた角丸設定オプション（推奨: 50%の完全な丸み）

形状バリエーション使用例

TSX
// 角丸設定の例
<InlineLabel rounded="none">角丸なし</InlineLabel>
<InlineLabel rounded="md">標準角丸</InlineLabel>
<InlineLabel rounded="full">ピル型（50%角丸・推奨）</InlineLabel>

角丸設定比較

none:

none 形状のラベルサンプル

md:

md 形状のラベルサンプル

full:

ピル型（推奨） 形状のラベルサンプル

カスタム背景色

独自の背景色とテキスト色を指定した使用例

カスタム背景色使用例

TSX
// カスタム背景色の例
<InlineLabel backgroundColor="#ff6b35" textColor="white">
  カスタムオレンジ
</InlineLabel>

<InlineLabel backgroundColor="#4a90e2" textColor="white">
  カスタムブルー
</InlineLabel>

<InlineLabel backgroundColor="#50c878" textColor="white">
  カスタムグリーン
</InlineLabel>

<InlineLabel backgroundColor="#9b59b6" textColor="white">
  カスタムパープル
</InlineLabel>

<InlineLabel backgroundColor="#f39c12" textColor="black">
  カスタムイエロー
</InlineLabel>

カスタム背景色デモ

カスタム背景色の例: カスタムオレンジ カスタムブルー カスタムグリーン

より多くの色の例: カスタムパープル カスタムイエロー カスタムレッド

ブランドカラーの使用例: Twitter Facebook YouTube

インタラクティブ使用例

クリック可能なラベルとリンクラベルの実装パターン

インタラクティブ機能実装例

TSX
// インタラクティブなラベルの例
<InlineLabel 
  variant="info" 
  interactive 
  onClick={() => filterByCategory('技術記事')}
>
  技術記事
</InlineLabel>

<InlineLabel 
  variant="accent" 
  href="/tags/react"
  interactive
>
  React
</InlineLabel>

インタラクティブ機能デモ

フィルタリング機能:

リンクとしてのラベル: 外部リンク 内部ページ

実用例

ブログ記事やプロジェクト管理での実際の使用パターン

実用例コード

TSX
// ブログ記事での使用例
<Heading level="h3">
  Next.js 15の新機能解説
  <InlineLabel variant="success" size="xs">新着</InlineLabel>
</Heading>
<Text>
  <InlineLabel variant="info" size="xs">技術記事</InlineLabel>{" "}
  <InlineLabel variant="default" size="xs">React</InlineLabel>{" "}
  <InlineLabel variant="default" size="xs">Next.js</InlineLabel>
</Text>

// プロジェクト情報での使用例
<Text>
  ステータス: <InlineLabel variant="warning">開発フェーズ</InlineLabel><br />
  優先度: <InlineLabel variant="error">高</InlineLabel>
</Text>

実際の使用場面

Next.js 15の新機能解説新着

技術記事 React Next.js TypeScript

Eコマースサイト構築進行中

ステータス: 開発フェーズ
優先度: 高
技術スタック: Next.js Stripe PostgreSQL

アクセシビリティ

WCAG 2.1 AA基準準拠のユニバーサルデザイン対応

アクセシビリティ実装例

TSX
// アクセシビリティ属性の使用例
<InlineLabel 
  variant="warning"
  aria-label="重要度が高いタスク"
>
  高優先度
</InlineLabel>

<InlineLabel 
  variant="info"
  aria-describedby="help-tooltip"
>
  ヘルプ
</InlineLabel>

アクセシビリティ対応例

このコンポーネントは WCAG 2.1 AA 基準に準拠しています:

  • 全てのカラーバリアントでコントラスト比 4.5:1 以上を保証
  • インタラクティブ要素では適切なフォーカス表示
  • キーボード操作に完全対応（Tab, Enter, Space キー）
  • スクリーンリーダーでの適切な読み上げ
  • 色だけでなくテキストでも情報を伝達

ARIA属性の使用例: 高優先度