ボタン

あらゆるバリアントのボタン: セマンティックカラー、アウトライン、角丸、円形、サイズ、アイコン、ローディング、ソーシャルブランド。components.Button でデフォルト値をグローバルに設定できます。

バリアント

バリアント

Vue

<div class="thl-demo-row">
  <ThlButton v-for="c in ['default','primary','success','info','warning','danger','inverse','purple']" :key="c" :variant="c">{{ c }}</ThlButton>
  <ThlButton variant="link">link</ThlButton>
</div>

React

{['default','primary','success','info','warning','danger','inverse','purple'].map((c) => (
  <Button key={c} variant={c}>{c}</Button>
))}
<Button variant="link">link</Button>

Angular

@for (c of ['default','primary','success','info','warning','danger','inverse','purple']; track c) {
  <button thl-button [variant]="c">{{ c }}</button>
}
<button thl-button variant="link">link</button>

アウトライン、角丸、円形

アウトライン、角丸、円形

Vue

<div>
  <div class="thl-demo-row"><ThlButton variant="primary" outline>Outline</ThlButton><ThlButton variant="success" rounded>Rounded</ThlButton><ThlButton variant="danger" rounded outline>Both</ThlButton></div>
  <div class="thl-demo-row"><ThlButton variant="primary" circle icon="plus" aria-label="add" /><ThlButton variant="danger" circle icon="heart" size="lg" aria-label="like" /><ThlButton variant="info" circle icon="star" size="xl" aria-label="star" /></div>
</div>

React

<Button variant="primary" outline>Outline</Button>
<Button variant="success" rounded>Rounded</Button>
<Button variant="danger" rounded outline>Both</Button>
<Button variant="primary" circle icon="plus" aria-label="add" />
<Button variant="danger" circle icon="heart" size="lg" aria-label="like" />

Angular

<button thl-button variant="primary" outline>Outline</button>
<button thl-button variant="success" rounded>Rounded</button>
<button thl-button variant="danger" rounded outline>Both</button>
<button thl-button variant="primary" circle icon="plus" aria-label="add"></button>
<button thl-button variant="danger" circle icon="heart" size="lg" aria-label="like"></button>

サイズ、アイコン、ローディング、ブロック

サイズ、アイコン、ローディング、ブロック

Vue

<div>
  <div class="thl-demo-row"><ThlButton v-for="s in ['xs','sm','md','lg','xl']" :key="s" variant="info" :size="s">{{ s }}</ThlButton></div>
  <div class="thl-demo-row"><ThlButton variant="primary" icon="download">Download</ThlButton><ThlButton variant="success" icon-right="arrow-right">Next</ThlButton><ThlButton variant="warning" loading>Loading</ThlButton><ThlButton disabled>Disabled</ThlButton></div>
  <div class="thl-demo-row"><ThlButton variant="success" block>Block button</ThlButton></div>
</div>

React

<Button variant="info" size="xs">xs</Button> … <Button variant="info" size="xl">xl</Button>
<Button variant="primary" icon="download">Download</Button>
<Button variant="success" iconRight="arrow-right">Next</Button>
<Button variant="warning" loading>Loading</Button>
<Button disabled>Disabled</Button>
<Button variant="success" block>Block button</Button>

Angular

<button thl-button variant="info" size="xs">xs</button> … <button thl-button variant="info" size="xl">xl</button>
<button thl-button variant="primary" icon="download">Download</button>
<button thl-button variant="success" iconRight="arrow-right">Next</button>
<button thl-button variant="warning" loading>Loading</button>
<button thl-button disabled>Disabled</button>
<button thl-button variant="success" block>Block button</button>

ソーシャルとグループ

ソーシャルとグループ

Vue

<div>
  <div class="thl-demo-row"><ThlButton v-for="s in ['facebook','twitter','linkedin','github','youtube','instagram']" :key="s" :variant="s" :icon="s === 'twitter' ? 'twitter' : s">{{ s }}</ThlButton></div>
  <div class="thl-demo-row"><ThlButtonGroup><ThlButton>Left</ThlButton><ThlButton>Middle</ThlButton><ThlButton>Right</ThlButton></ThlButtonGroup><ThlButtonGroup vertical><ThlButton variant="primary">Top</ThlButton><ThlButton variant="primary">Bottom</ThlButton></ThlButtonGroup></div>
</div>

React

<Button variant="facebook" icon="facebook">facebook</Button>
<ButtonGroup><Button>Left</Button><Button>Middle</Button><Button>Right</Button></ButtonGroup>
<ButtonGroup vertical><Button variant="primary">Top</Button><Button variant="primary">Bottom</Button></ButtonGroup>

Angular

<button thl-button variant="facebook" icon="facebook">facebook</button>
<thl-button-group><button thl-button>Left</button><button thl-button>Middle</button><button thl-button>Right</button></thl-button-group>
<thl-button-group vertical><button thl-button variant="primary">Top</button><button thl-button variant="primary">Bottom</button></thl-button-group>

グローバルデフォルト

createThl({ components: { Button: { rounded: true, size: 'sm' } } })

prop で上書きしない限り、すべてのボタンが角丸かつ小サイズになります。

Angular では、thl-button はネイティブの <button> / <a> に付ける属性コンポーネントなので、type、disabled、routerLink、フォーム送信、フォーカスがネイティブどおりに動作します。リップルはデフォルトで有効です（Angular では ripple / noRipple）。

API

Button

<ThlButton> · import { ThlButton } from '@thl-ui/vue'

Prop	型	デフォルト
variant	string	—
size	string	—
outline	boolean	—
rounded	boolean	—
circle	boolean	—
block	boolean	—
loading	boolean	—
disabled	boolean	—
icon	string	—
iconRight	string	—
label	string	—
href	string	—
type	string	"button"
ripple	boolean	true

イベント: click

スロット: icondefault

ButtonGroup

<ThlButtonGroup> · import { ThlButtonGroup } from '@thl-ui/vue'

Prop	型	デフォルト
vertical	boolean	—
justified	boolean	—

スロット: default