@outbook/webcomponents-button-default

This package provides a default button component.

Installation

npm install @outbook/webcomponents-button-default

Usage

As a Lit Element

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

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

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.

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

<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. |

Wrapper Function Properties

The ButtonDefault wrapper function has these additional properties:

| Property | Type | Default | Description | |----------------|------------|-------------|-----------------------------------------------------------------| | isDisabled | Boolean | false | If true, the button is disabled. | | extraClasses | String | undefined | Classes to add to the host element. | | eventFn | Function | undefined | A function to call when the button-interaction event is fired. |

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.