Button

Buttons in every variant: semantic colors, outline, rounded, circle, sizes, icons, loading and social brands. Defaults can be set globally via components.Button.

Variants

Variants

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, rounded, circle

Outline, rounded, circle

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>

Sizes, icons, loading, block

Sizes, icons, 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>

Social & group

Social & group

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>

Global defaults

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

Every button becomes rounded and small unless a prop says otherwise.

In Angular, thl-button is an attribute component on a native <button> / <a>, so type, disabled, routerLink, form submission and focus behave natively. Ripple is on by default (ripple / noRipple in Angular).

API

Button

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

Prop	Type	Default
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

Events: click

Slots: icondefault

ButtonGroup

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

Prop	Type	Default
vertical	boolean	—
justified	boolean	—

Slots: default