Provider Mark
レビュー済みの Google、GitHub、Apple 認証プロバイダーマークです。
主なプロパティ
TRProviderMark は provider="google" | "github" | "apple" で選択した公式マークをレンダリングします。aria-label を渡さない場合は装飾として扱われます。通常は外側のボタンやリンクでアクセシブルな名前を指定してください。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/provider-mark.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRProviderMark } from '@tinyrack/ui/components/provider-mark';長い行はコード領域を横にスクロールして確認できます。
使用方法
例
プロバイダー名を表示するアクション内でマークを使用してください。マーク自体を読み上げる必要がある場合のみ aria-label を追加します。
API
TRProviderMarkProps は native SVG props と必須の provider union を提供します。--tr-provider-mark-size の既定値は --tinyrack-space-xl で、--tr-provider-mark-color は単色の GitHub と Apple マークの色を設定します。レビュー済みの Google マルチカラーマークは変更されません。