Button Reactコンポーネント

ボタンコンポーネント
ボタンのプロパティ
例

ボタンコンポーネント

以下のコンポーネントが含まれています

Button - 単一のボタン

ボタンのプロパティ

名前	型	デフォルト	説明
clear	boolean	undefined	（塗りつぶし色なしの）クリアスタイルでボタンを作成します。`clearIos`および`clearMaterial`プロパティを上書きします
clearIos	boolean	boolean	iOSテーマで（塗りつぶし色なしの）クリアスタイルのボタンを作成します
clearMaterial	boolean	boolean	boolean
colors	object		Tailwind CSSカラークラスを持つオブジェクト
colors.activeBgIos	string	'active:bg-primary'
colors.activeBgMaterial	string	''
string	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorder	string	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledText	string	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIos	string	string
'active:bg-ios-primary-shade'	string	''
colors.fillActiveBgMaterial	string	colors.fillBgIos
string	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	string
colors.fillTextMaterial	string	string
colors.fillTouchRipple	string	string
colors.outlineBorderIos	string	string
colors.outlineBorderMaterial	string	string
colors.textIos	string	string
colors.textMaterial	string	string
colors.tonalBgIos	string	colors.fillBgIos
string	string	string
colors.tonalTextIos	string	string
string	string	string
colors.touchRipple	string	string
component	string	string	コンポーネントのHTML要素
disabled	boolean	boolean	boolean
href	string		string
inline	boolean	boolean	boolean
large	boolean	undefined	boolean
largeIos	boolean	boolean	boolean
largeMaterial	boolean	boolean	boolean
outline	boolean	undefined	boolean
outlineIos	boolean	boolean	boolean
outlineMaterial	boolean	boolean	boolean
raised	boolean	undefined	boolean
raisedIos	boolean	boolean	boolean
raisedMaterial	boolean	boolean	boolean
rounded	boolean	undefined	boolean
roundedIos	boolean	boolean	boolean
roundedMaterial	boolean	boolean	boolean
segmented	boolean	boolean	boolean
segmentedActive	boolean	boolean	boolean
segmentedStrong	boolean	boolean	boolean
small	boolean	undefined	boolean
smallIos	boolean	boolean	boolean
smallMaterial	boolean	boolean	boolean
tonal	boolean	undefined	boolean
tonalIos	boolean	boolean	boolean
tonalMaterial	boolean	boolean	boolean
touchRipple	boolean	boolean	Materialテーマでタッチリップル効果を有効にします

例

Buttons.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Block,
  BlockTitle,
} from 'konsta/react';

export default function ButtonsPage() {
  return (
    <Page>
      <Navbar
        title="Buttons"
        />

      <BlockTitle>Default Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button>Button</Button>
          <Button className="k-color-brand-red">Button</Button>
          <Button>Button</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button outline>Outline</Button>
          <Button className="k-color-brand-red" outline>
            Outline
          </Button>
          <Button outline>Outline</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button clear>Clear</Button>
          <Button className="k-color-brand-red" clear>
            Clear
          </Button>
          <Button clear>Clear</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button tonal>Tonal</Button>
          <Button className="k-color-brand-red" tonal>
            Tonal
          </Button>
          <Button tonal>Tonal</Button>
        </div>
      </Block>

      <BlockTitle>Rounded Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded>Button</Button>
          <Button rounded className="k-color-brand-green">
            Button
          </Button>
          <Button rounded>Button</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded outline>
            Outline
          </Button>
          <Button rounded outline className="k-color-brand-green">
            Outline
          </Button>
          <Button rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded clear>
            Clear
          </Button>
          <Button rounded clear className="k-color-brand-green">
            Clear
          </Button>
          <Button rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Large Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button large>Button</Button>
          <Button large className="k-color-brand-yellow">
            Button
          </Button>
          <Button large rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button large outline>
            Outline
          </Button>
          <Button large outline className="k-color-brand-yellow">
            Outline
          </Button>
          <Button large rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button large clear>
            Clear
          </Button>
          <Button large clear className="k-color-brand-yellow">
            Clear
          </Button>
          <Button large rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Small Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button small>Button</Button>
          <Button small>Button</Button>
          <Button small rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button small outline>
            Outline
          </Button>
          <Button small outline>
            Outline
          </Button>
          <Button small rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button small clear>
            Clear
          </Button>
          <Button small clear>
            Clear
          </Button>
          <Button small rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Raised Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised>Button</Button>
          <Button raised>Button</Button>
          <Button raised rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised outline>
            Outline
          </Button>
          <Button raised outline>
            Outline
          </Button>
          <Button raised rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised clear>
            Clear
          </Button>
          <Button raised clear>
            Clear
          </Button>
          <Button raised rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Disabled Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button disabled>Button</Button>
          <Button disabled outline>
            Outline
          </Button>
          <Button disabled clear>
            Clear
          </Button>
        </div>
      </Block>
    </Page>
  );
}