npm package: @outbook/webcomponents-button-default
Description: Web components button-default
Author: Antonio Rodríguez
Latest version: 1.2.0

# @outbook/webcomponents-button-default

This package provides a default button component.

## Installation

```bash
npm install @outbook/webcomponents-button-default
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {ButtonDefault} from '@outbook/webcomponents-button-default';

function render() {
  return html`
    ${ButtonDefault({
      text: 'Click me',
      size: 'default',
      eventFn: (e) => console.log('Button clicked:', e.detail.originalEvent),
    })}
    ${ButtonDefault({
      text: 'Compact action',
      size: 'compact',
    })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-button-default';
```

```html
<outbook-button-default text="Click me"></outbook-button-default>
```

## Component: `outbook-button-default`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties

| Attribute      | Property     | Type      | Default     | Description                                                     |
|----------------|--------------|-----------|-------------|-----------------------------------------------------------------|
| `text`         | `text`       | `String`  | `''`        | The text to display in the button.                              |
| `label`        | `label`      | `String`  | `''`        | The `aria-label` for the button.                                |
| `icon`         | `icon`       | `String`  | `''`        | The name of the icon to display in the button.                  |
| `icons`        | `icons`      | `Object`  | `{}`        | An object containing the icon definitions.                      |
| `status`       | `status`     | `String`  | `''`        | The status of the button. Set to `disabled` to disable it.      |
| `size`         | `size`       | `String`  | `'default'` | Button size. Supported values are `default` and `compact`.      |

### Wrapper Function Properties

The `ButtonDefault` wrapper function has these additional properties:

| Property       | Type       | Default     | Description                                                     |
|----------------|------------|-------------|-----------------------------------------------------------------|
| `isDisabled`   | `Boolean`  | `false`     | If `true`, the button is disabled.                              |
| `size`         | `String`   | `'default'` | Button size. Supported values are `default` and `compact`.      |
| `extraClasses` | `String`   | `undefined` | Classes to add to the host element.                             |
| `eventFn`      | `Function` | `undefined` | A function to call when the `button-interaction` event is fired. |

### Sizes

- `default`: standard button spacing and typography
- `compact`: reduced padding, text size, line height, and icon size

### Events

- **`button-interaction`**: Fired when the user clicks or presses Enter or Space on the button. The `event.detail.originalEvent` contains the original event.

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                                      | Description            |
|------------------------------------------------------|------------------------|
| `--outbook-button-default--text-color`         | The text color.        |
| `--outbook-button-default--background-color`   | The background color.  |
| `--outbook-button-default--background-color-hover` | The background color on hover. |

## License

This component is licensed under the Apache-2.0 License.