#### Themes

* __default__/__secondary__: teal outline
* __primary__: solid teal
* __mono__: monochrome
* __inverse__: for use on dark backgrounds
* __b2c__: A theme for b2c products eg [http://help.ft.com](http://help.ft.com)
* __custom theme primary__/__custom theme secondary__: Any color defined in [o-colors](http://registry.origami.ft.com/components/o-colors) can be used to set up custom color buttons


and the following sizes:

#### Sizes

* __default__: 28px high
* __big__: 40px high

and have the following states:

#### States

* __standard__: without any interaction
* __hover__: when the mouse pointer is over
* __focus__: it's the current target of keyboard input
* __active__: the pointer is pushing / tapping / clicking the button
* __selected__: marked as chosen
* __disabled__: when clicking it will have no effect
* __pressed__: for toggleable buttons that are currently activated


#### Use-cases

* __grouped__: clustering buttons when choosing between options
* __pagination__: for navigating through pages
* __icon__: in some cases buttons can have an icon instead of or in addition to text

Button width is determined by its content.