Fluid Visual Scaling Component Library

Button

Markup

<Button>Button</Button>
<Button style="ghost">Ghost Button</Button>
<Button style="primary">Primary Button</Button>
<Button style="positive">Positive Button</Button>
<Button style="negative">Negative Button</Button>
<Button size="xs">Extra Sm Button</Button>
<Button size="sm">Sm Button</Button>
<Button size="lg">Large Button</Button>
<Button size="xl">Extra Large Button</Button>

Custom CSS Properties

--btn-background-color-default
--btn-border-width
--btn-border-style
--btn-border-color
--btn-border-radius
--btn-color-primary
--btn-background-color-primary
--btn-color-positive
--btn-background-color-positive
--btn-color-negative
--btn-background-color-negative
--btn-shadow-base-outer
--btn-shadow-base-inner
--btn-shadow-hover-outer
--btn-shadow-hover-inner
--btn-shadow-active-outer
--btn-shadow-active-inner

Props

Title	Value
class	`string`
onClick	`onClick`
Style	`"primary" \| "positive" \| "negative" \| "ghost"`
Size	`"xs" \| "sm" \| "lg" \| "xl"`

Button

Fiddle