<input class="kx-btn kx-btn--skin-secondary kx-btn--size-large" id="--2004" type="button" value="Input button" />
{% if id %}
{% set random_number = range(0, 100000) | random %}
{% set id = id | replace(' ', '-') | lower + '--' + random_number %}
{% else %}
{% set random_number = range(0, 100000) | random %}
{% set id = label | replace(' ', '-') | lower + '--' + random_number %}
{% endif %}
<input class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}" id="{{ id }}" type="{{ type }}" value="{{ value }}" {{'disabled="disabled"' if disabled }} {{'required="required"' if required }}/>
{
"element": "input",
"type": "button",
"id": null,
"classes": null,
"state": null,
"disabled": null,
"skin": "secondary",
"size": "large",
"required": null,
"value": "Input button",
"error": null
}
- Handle: @button--button
- Variants (3): Type Button , Type Reset , Type Submit
- Preview:
- Filesystem Path: src\components\01-form\input\button.njk
- Referenced by (63): @button-group, @button-group--btn-group-align-center, @button-group--btn-group-align-end, @button-group--btn-group-align-top, @button-group--btn-group-align-middle, @button-group--btn-group-align-bottom, @button-group--btn-group-fit-stretch, @button-group--btn-group-tight, @button-group--btn-group-tight-stretch, @button-group--btn-group-mixed, @card, @card--card-tags, @card--card-icon-svg, @card--card-icon-png, @card--card-bg-img, @card--card-bg-img-icon, @input-group, @hero, @hero--75-image, @hero--100-image, @hero--50-video, @hero--75-video, @hero--100-video, @listgroup, @listgroup--listgroup-selected, @listgroup--listgroup-title, @listgroup--listgroup-row-actions, @listgroup--listgroup-badge, @listgroup--listgroup-metadata, @listgroup--listgroup-checkbox, @listgroup--listgroup-radio, @listgroup--listgroup-toggle, @modal, @modal--modal-skin-simple, @modal--modal-size-small, @modal--modal-size-medium, @modal--modal-size-large, @modal--modal-success, @modal--modal-warning, @modal--modal-danger, @nav, @notification, @notification--notification-success, @notification--notification-warning, @notification--notification-danger, @notification--notification-info, @notification--notification-banner-neutral, @notification--notification-banner-success, @notification--notification-banner-warning, @notification--notification-banner-danger, @notification--notification-banner-info, @notification--notification-banner-critical, @notification--notification-inline-neutral, @notification--notification-inline-success, @notification--notification-inline-warning, @notification--notification-inline-danger, @notification--notification-inline-info, @notification--notification-dismissable, @pagination, @pagination--pagination-align-center, @pagination--pagination-align-right, @pagination--pagination-icons-only, @pagination--pagination-disabled-active
There are no notes for this item.