Markdown docs
Button
This is Twig implementation of the Button component.
Basic example usage:
<Button>Primary button</Button>Advanced example usage:
<Button
color="primary"
isBlock
type="submit"
>
Primary block submit button
</Button>Without lexer:
{% embed "@spirit/button.twig" with { props: {
color: 'primary'
}} %}
{% block content %}
Primary button
{% endblock %}
{% endembed %}API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| color | Action Color dictionary, Emotion Color dictionary | primary | ✕ | Color variant |
| formtarget | string | null | ✕ | Submit button target |
| isBlock | bool | false | ✕ | Span the element to the full width of its parent |
| isDisabled | bool | false | ✕ | If true, Button is disabled |
| isLoading | bool | false | ✕ | If true, Button is in a loading state, disabled and the Spinner is visible |
| isSquare | bool | false | ✕ | If true, Button is square, usually only with an Icon |
| name | string | null | ✕ | Submit button name |
| size | Size dictionary | medium | ✕ | Size variant |
| type | string | button | ✕ | Type of the Button |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
Example