Button Component

Button with Brand Colors

<JiaHaoButton color="primary">primary</JiaHaoButton>

<JiaHaoButton color="secondary">secondary</JiaHaoButton>

<JiaHaoButton color="accent">accent</JiaHaoButton>

<JiaHaoButton color="neutral">neutral</JiaHaoButton>

<JiaHaoButton color="glass">glass</JiaHaoButton>

<JiaHaoButton color="link">link</JiaHaoButton>

Active Button

<JiaHaoButton color="primary" active>primary</JiaHaoButton>

<JiaHaoButton color="secondary" active>secondary</JiaHaoButton>

<JiaHaoButton color="accent" active>accent</JiaHaoButton>

<JiaHaoButton color="neutral" active>neutral</JiaHaoButton>

<JiaHaoButton color="glass" active>glass</JiaHaoButton>

<JiaHaoButton color="link" active>link</JiaHaoButton>

Button with State Colors

<JiaHaoButton color="success" active>success</JiaHaoButton>

<JiaHaoButton color="warning" active>warning</JiaHaoButton>

<JiaHaoButton color="error" active>error</JiaHaoButton>

<JiaHaoButton color="info" active>info</JiaHaoButton>

Outline Buttons

<JiaHaoButton color="primary" outline>primary</JiaHaoButton>

<JiaHaoButton color="secondary" outline>secondary</JiaHaoButton>

<JiaHaoButton color="accent" outline>accent</JiaHaoButton>

<JiaHaoButton color="neutral" outline>neutral</JiaHaoButton>

<JiaHaoButton color="glass" outline>glass</JiaHaoButton>

<JiaHaoButton color="link" outline>link</JiaHaoButton>

Outline Buttons with State Colors

<JiaHaoButton color="success" outline>success</JiaHaoButton>

<JiaHaoButton color="warning" outline>warning</JiaHaoButton>

<JiaHaoButton color="error" outline>error</JiaHaoButton>

<JiaHaoButton color="info" outline>info</JiaHaoButton>

Button with State Colors

<JiaHaoButton color="success" active>success</JiaHaoButton>

<JiaHaoButton color="warning" active>warning</JiaHaoButton>

<JiaHaoButton color="error" active>error</JiaHaoButton>

<JiaHaoButton color="info" active>info</JiaHaoButton>

Outline Buttons

<JiaHaoButton color="primary" outline>primary</JiaHaoButton>

<JiaHaoButton color="secondary" outline>secondary</JiaHaoButton>

<JiaHaoButton color="accent" outline>accent</JiaHaoButton>

<JiaHaoButton color="neutral" outline>neutral</JiaHaoButton>

<JiaHaoButton color="glass" outline>glass</JiaHaoButton>

<JiaHaoButton color="link" outline>link</JiaHaoButton>

Outline Buttons with State Colors

<JiaHaoButton color="success" outline>success</JiaHaoButton>

<JiaHaoButton color="warning" outline>warning</JiaHaoButton>

<JiaHaoButton color="error" outline>error</JiaHaoButton>

<JiaHaoButton color="info" outline>info</JiaHaoButton>

Button Sizes

<JiaHaoButton size="lg" outline>lg</JiaHaoButton>

<JiaHaoButton size="md" outline>md</JiaHaoButton>

<JiaHaoButton size="sm" outline>sm</JiaHaoButton>

<JiaHaoButton size="xs" outline>xs</JiaHaoButton>

Wide Button Sizes

<JiaHaoButton wide>Wide</JiaHaoButton>

Loading

<JiaHaoButton loading>Loading</JiaHaoButton>