ソーシャルボタン
24 プロバイダーのログインボタンとカスタムブランド。ブランドをネーミングすると、ロゴ、色、アクセス可能なラベルが一緒に供給されるので、それらのスタックは離れて漂流することはできません。 OAuth の開始がナビゲーションであるため、デフォルトでボタンをレンダーするか、または href を与えられたときにアンカーをレンダーします。
インストール
CLI または手動でソーシャルボタンコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add social-button共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
ブランド
すべての24のロゴはコンポーネントとインラインに出荷されますので、インストールはアイコンパッケージを引っ張りません。 フルカラーマークは、SVGロゴ(CC0)、シンプルなアイコン(CC0)のモノクログリフ、および4つのブランドシンプルアイコンがBootstrapアイコン(MIT)から運ばれることはありません。 Amazonにはフルカラーマークが上流はありません。 white ブランドの結束したグリフに戻ります。
type SocialBrand = | "google" | "apple" | "github" | "gitlab" | "microsoft" | "x" | "facebook" | "linkedin" | "discord" | "slack" | "figma" | "notion" | "dropbox" | "spotify" | "twitch" | "reddit" | "tiktok" | "instagram" | "telegram" | "whatsapp" | "amazon" | "bitbucket" | "auth0" | "okta" | "custom";出演作品
colorful デフォルトは: プライマリボタンと同じグラデーション・アンド・シャドウのレシピにあるブランド独自の色なので、過去のウィジェットではなく、BoardUI コントロールとして読み込まれます。 black 高コントラストの固体の同じ形です。 white 概説され、各プロバイダーの実質のマルチカラーマークを示す唯一の1つは、アートワークがバックグラウンドと戦うであろう飽和塗りつぶしだからです。 いくつかのプロバイダのスタックのために、好み white: 競争のブランドの記入項目の列は単一の選択を読めることができません。
{/* Colorful: the brand colour in the primary Button's gradient (default) */}<SocialButton brand="google" appearance="colorful" />
{/* Black: the same shape in high-contrast solid */}<SocialButton brand="google" appearance="black" />
{/* White: outlined, and the one that shows the real multi-colour mark */}<SocialButton brand="google" appearance="white" />サイズ
medium (36px) と small(32px)はピクセル、半径、およびグリフサイズのベースボタン独自のサイズなので、これらはリズムの半分ステップなしでボタンの横にある形で座っています。 どちらも固定幅(300pxと250px)を持ち、プロバイダーの列はそれぞれ上に並べます。 fullWidth コンテナに戻る手。
<SocialButton brand="slack" size="medium" /> {/* 36px, like Button medium */}<SocialButton brand="slack" size="small" /> {/* 32px, like Button small */}
{/* Drop the fixed width when the container should decide */}<SocialButton brand="slack" fullWidth />アイコンのみ
ロゴだけを示す正方形のボタン, 電子メールフィールドの下に代替の行のために. ブランド名は、に移動します aria-labelですから、制御はまだそれ自体を発表します。
<SocialButton brand="google" appearance="white" iconOnly /><SocialButton brand="apple" appearance="white" iconOnly /><SocialButton brand="github" appearance="white" iconOnly />
{/* The brand name stays as the accessible name when the label is hidden */}カスタムブランド
内蔵されていないアイデンティティプロバイダの場合、パス brand="custom" とある。 config. のみ アイコン 必須項目: label デフォルトは SSO そして、 色: 色 黒に。
import { RiShieldKeyholeLine } from "@remixicon/react";
<SocialButton brand="custom" config={{ icon: <RiShieldKeyholeLine className="size-5" />, label: "Okta SSO", color: "#0f172a", }}/>
{/* label defaults to "SSO" and color to black */}<SocialButton brand="custom" config={{ icon: <RiShieldKeyholeLine className="size-5" /> }} />ラベル
デフォルトラベルは 続行<Brand>. 署名画面とログイン画面が通常異なる言葉を望むので、子供を言うように渡す。
<SocialButton brand="google" /> {/* Continue with Google */}<SocialButton brand="google">Sign up with Google</SocialButton><SocialButton brand="google">Log in</SocialButton>ボタンとリンク
渡る href ボタンの代わりにアンカーをレンダーします。ほとんどの OAuth は、プロバイダ URL にナビゲートして起動し、アンカーは、適切なセマティクス、中間クリック、キーボードの動作を無料で提供します。
{/* An OAuth start is a navigation, so pass href and get an anchor */}<SocialButton brand="github" href="/api/auth/github" />
{/* Otherwise it is a button */}<SocialButton brand="github" onClick={() => signIn("github")} />商標について
ロゴは、各所有者の商標です。ここに含まれているので、サインイン画面を作成できます。 いくつかのプロバイダは、特に、色、明確なスペース、ワード、Google、Appleをカバーするログインボタンのルールを公開しているので、生産ログインを出荷する前にそれらを確認してください。