# j-Button

> A simple button component with great features.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: f5648b9c9e95a91ed8d9b26516e759e0205fa1be2394e7a03e357aa0ee7ab53f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

A simple button component with great features.

- fully responsive
- supports validation

__Configuration__:

- `exec {String}` __required__ a path to the `function(el, path)` method
- `icon {String}` Total JS icons (default: `undefined`)
- `color {String}` An icon color (default: `undefined`)
- `validation {Boolean}` Enables validation for all components on the path (default: `true`)
- `delay` {Number} a timeout for validation (default: `100`)
- `name {String}` a name for the `name` attribute (default: `submit`)
- `size {String}` a size:
	- `small`
	- `normal` (default)
	- `large`
	- `big`
- `ddos {String}` A simple DDOS prevetion for multiple clicks, possible values:
	- `undefined` disables prevention
	- `10 seconds`
	- `session`
	- `1 day`
	- etc.
- `if` {String} can contain JS condition for evaluation(optional)
	- `value` {Object} contains entire model
	- `path` {String} contains changed path
	- __must return boolean__
- `track` {String} can contain paths divided by comma which evaluate validation (executors for paths aren't components, but these methods `SET()`, `UPD()`, `INC()`, etc.)
- `validonly` {Boolean} skips `dirty` state (default: `false`)

Use it with `<ui-component name="button">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<div class="row">
	<div class="col-md-3 col-xs-6">
		<ui-component name="button" config="exec:clickme" class="hidden">Show me</ui-component>
	</div>
</div>

<script>

	function clickme() {
		alert('Clicked!');
	}

</script>
```