Button

Nút bấm với đủ mọi biến thể: màu ngữ nghĩa, outline, bo tròn, hình tròn, các kích thước, icon, trạng thái loading và nút mạng xã hội. Có thể đặt giá trị mặc định toàn cục qua components.Button.

Biến thể màu

Biến thể màu

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>

Outline, bo tròn, hình tròn

Outline, bo tròn, hình tròn

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>

Kích thước, icon, loading, block

Kích thước, icon, loading, block

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>

Mạng xã hội & nhóm nút

Mạng xã hội & nhóm nút

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>

Mặc định toàn cục

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

Mọi nút đều bo tròn và cỡ nhỏ, trừ khi prop ghi đè.

Trong Angular, thl-button là attribute component gắn lên <button> / <a> native, nên type, disabled, routerLink, submit form và focus hoạt động như HTML gốc. Hiệu ứng ripple bật mặc định (tắt bằng ripple / noRipple trong Angular).

API

Button

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

Prop	Kiểu	Mặc định
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

Sự kiện: click

Slot: icondefault

ButtonGroup

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

Prop	Kiểu	Mặc định
vertical	boolean	—
justified	boolean	—

Slot: default