# Button

- Entry point: `@koobiq/components/button`
- NgModule: `KbqButtonModule`
- API: https://koobiq.io/api/button.md
- Component tokens: https://koobiq.io/tokens/button.md
- Page: https://koobiq.io/en/components/button/overview

Used to trigger actions.

[**Example: Button overview** (`button-overview`)](https://koobiq.io/examples/button-overview.md)

## Fill and Style

[**Example: Button fill and style** (`button-fill-and-style`)](https://koobiq.io/examples/button-fill-and-style.md)

[**Example: button-fill-and-style-only-icon** (`button-fill-and-style-only-icon`)](https://koobiq.io/examples/button-fill-and-style-only-icon.md)

## Content

[**Example: Button content** (`button-content`)](https://koobiq.io/examples/button-content.md)

When a button holds only an icon, give it a name with `aria-label` or `aria-labelledby`. Use [Icon Button](https://koobiq.io/en/components/icon-button.md) if you need an icon button without a background.

## Corner cases

Depending on the content requirements, a button can take the following width values:

Hug — the button width depends on the length of the text inside and equals the text width plus the side paddings up to the button edges.

[**Example: Button hug content** (`button-hug-content`)](https://koobiq.io/examples/button-hug-content.md)

Fixed — the button width is fixed and does not depend on the length of the text. If the text does not fit, it is truncated with an ellipsis. Do not forget about the inner paddings.

[**Example: Button fixed content** (`button-fixed-content`)](https://koobiq.io/examples/button-fixed-content.md)

Fill — the button adapts to the width of the block it is placed in. If the width of the block changes (for example, of a modal window), the width of the button changes too. The text inside such a button behaves the same way as in Fixed.

[**Example: Button fill content** (`button-fill-content`)](https://koobiq.io/examples/button-fill-content.md)

If processing an action takes more than 1–2 seconds, the progress indication ("loading") can be used. It shows that the system is processing data.

[**Example: Button loading state** (`button-loading-state`)](https://koobiq.io/examples/button-loading-state.md)