Button
Buttons can be used for actions or links
Tag:
x-turbine-ui-button
<x-turbine-ui-button>Default Link</x-turbine-ui-button><x-turbine-ui-button variant="brand">Brand Link</x-turbine-ui-button><x-turbine-ui-button variant="primary">Primary Link</x-turbine-ui-button><x-turbine-ui-button variant="secondary">Secondary Link</x-turbine-ui-button><x-turbine-ui-button variant="success">Success Link</x-turbine-ui-button><x-turbine-ui-button variant="warning">Warning Link</x-turbine-ui-button><x-turbine-ui-button variant="danger">Danger Link</x-turbine-ui-button>
Attributes
Name | Type | Options | Description |
---|---|---|---|
accent | boolean | Adds an accent | |
active | boolean | Sets state as active | |
animate | boolean | Adds an animation | |
border | boolean | Adds a border | |
divide | boolean | Adds a divide between elements | |
gradient | boolean | Adds a gradient | |
hollow | boolean | Removes background colour | |
hover | boolean | Adds a hover state | |
href | string | Adds a link | |
prefix | string | Adds content to the start | |
ring | boolean | Adds a ring | |
rounded | boolean | Adds a rounded corner | |
shadow | boolean | Adds a shadow | |
size | string | Size is used to control styles such as margin, padding and font size. Extensible via the theme. | |
suffix | string | Adds content to the end | |
variant | string | A variant is like a colour palette |