Components – legacy
Button GroupDeprecated
This component is deprecated and should not be used in any new projects.
Play around with props, edit and copy code.
Button Group has the same appearance as the default buttons with the addition that they are grouped closely together, in order to change the look of the component you need to provide the styling to the internal buttons.
Properties
ButtonGroup
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| block | bool | ||
| children | node | ||
| className | string |
Button
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| block | bool | false | Set true to get a full width button. Perfect for buttons placed in Grid. |
| circle | bool | false | Set to true for a circular button. |
| Component | node | 'button' | Button is the default node type. |
| className | string | '' | Custom classes |
| elemRef | object | null | |
| focus | bool | false | Set true for a CTA button. |
| ghost | bool | false | Set true for a ghost button |
| inverted | bool | false | Set true for a primary button. Set false for a primary button on dark surfaces. |
| size | union | 300 | 300 is default. 100 small button |
| thin | bool | false | Use thin borders. May only be used by Svenska Spel Sport & Casino |
| transparent | bool | false | Set true for a secondary button Combine with inverted true on dark surfaces for secondary button. |
| type | enum | 'button' | Use submit for forms. |
| children * | node | Content. | |
| disabled | bool | Set true to get a disabled button | |
| doubleLines | bool | Usen in tight areas where the content in a button needs to be placed on two lines. | |
| href | string | Add href to turn button in to a <a-tag. | |
| iconPosition | enum | Position of icon. | |
| onClick | func | Run callback function on click. | |
| rounded | bool | Set true for a rounded button |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.