RtkControlbarButton

アイコン、ラベル、読み込み状態、警告インジケーターをサポートする、コントロールバー向けの再利用可能なボタンです。

プロパティ

プロパティ	型	必須	デフォルト	説明
`label`	`string`	✅	`' '`	ボタンのラベルテキスト
`icon`	`string`	✅	-	SVG アイコン文字列
`iconPack`	`IconPack`	❌	`defaultIconPack`	カスタムアイコンパック
`isLoading`	`boolean`	❌	`false`	アイコンの代わりに読み込みスピナーを表示する
`disabled`	`boolean`	❌	`false`	ボタンが無効かどうか
`onClick`	`() => void`	❌	-	押下時のコールバック
`showWarning`	`boolean`	❌	`false`	警告インジケーターを表示する
`variant`	`'button' \| 'horizontal'`	❌	`'button'`	レイアウトのバリアント
`size`	`'lg' \| 'md' \| 'sm' \| 'xl'`	❌	`'sm'`	アイコンサイズ

使用例

基本的な使い方

import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkControlbarButton label="Mute" icon={muteIcon} />;
}

プロパティを指定する場合

import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkControlbarButton
			label="Mute"
			icon={muteIcon}
			variant="horizontal"
			size="md"
			onClick={() => console.log("pressed")}
		/>
	);
}