<button type="button" class="mp c-button c-button--blue" >Button</button>Button - Blue
{
"label": "Button",
"colour": "blue"
}Props
| Name | Type | Description |
|---|---|---|
| label | string | |
| link | string | Converts from a button an anchor |
| colour | string | eg. "red", "outline-green" |
| inline | bool | Is the button inline-flex or flex? |
| classes | string | Additional class attributes |
| attrs | string | Addtional HTML attributes |
CSS modifiers
| Name | Description | |
|---|---|---|
| c-button--inline | Makes the button inline-flex | |
| c-button--[colour] | petrol, red, blue, white, outline-green, outline-white | |
| c-button--small | Shrinks the button | |
| c-button--wide | Makes the button 100% width | |
| c-button--tight | Reduces the left/right padding | |
| c-button--loading | Replace the button text with a loading indicator |