# ef-button

Use button for actions in forms, dialogs,
and more with support for different states and styles.

## Properties

| Property      | Attribute     | Type                  | Default | Description                                      |
|---------------|---------------|-----------------------|---------|--------------------------------------------------|
| `active`      | `active`      | `boolean`             | false   | An active or inactive state, can only be used with toggles property/attribute |
| `cta`         | `cta`         | `boolean`             | false   | Set call-to-action state                         |
| `disabled`    | `disabled`    | `boolean`             | false   | Set disabled state                               |
| `hoverIcon`   | `hover-icon`  | `string \| null`      | null    | Specify icon to display when hovering. Value can be icon name |
| `icon`        | `icon`        | `string \| null`      | null    | Specify icon to display in button. Value can be icon name |
| `textpos`     | `textpos`     | `"before" \| "after"` | "after" | Customises text alignment when specified alongside `icon` property |
| `toggles`     | `toggles`     | `boolean`             | false   | Enable or disable ability to be toggled          |
| `transparent` | `transparent` | `boolean`             | false   | Removes background when specified alongside `icon` property |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `active-changed` | Fired when `active` property changed by user taps on toggled button. It will not be triggered if `active` state is changed programmatically. |