# @phase2/outline-button

> The Outline Components for the web button component

Latest version **0.1.7** (published 2023-08-23) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @phase2/outline-button
pnpm add @phase2/outline-button
yarn add @phase2/outline-button
bun add @phase2/outline-button
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2023-08-23 |
| First published | 2022-08-26 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 407.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 131 |
| Author | Phase2 Technology |
| Maintainers | nadavoid, grshane, dmuzyka, mkochendorfer, pschuelke, yuginaili, cclarkdev, febbraro, himerus, shaal |
| Keywords | outline components, outline design, button |

## Links

- npm: https://www.npmjs.com/package/@phase2/outline-button
- Repository: https://github.com/phase2/outline
- Homepage: https://github.com/phase2/outline/tree/next/packages/components/@deprecated/outline-button
- Issues: https://github.com/phase2/outline/issues
- npm.io page: https://npm.io/package/@phase2/outline-button

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^2.3.1
- [tslib](https://npm.io/package/tslib.md) ^2.1.0
- [@phase2/outline-core](https://npm.io/package/@phase2/outline-core.md) ^0.2.5
- [@phase2/outline-link](https://npm.io/package/@phase2/outline-link.md) ^0.1.8

## Recent versions

- 0.1.7 (latest) — 2023-08-23
- 0.1.6 — 2023-08-08
- 0.1.5 — 2023-08-04
- 0.1.4 — 2023-03-23
- 0.1.3 — 2023-03-08
- 0.1.2 — 2023-03-07
- 0.1.1 — 2023-02-28
- 0.1.0 — 2022-10-27
- 0.0.2 — 2022-10-10
- 0.0.1 — 2022-08-26

## README

# outline-button

The Outline Button component

## Properties

| Property        | Attribute        | Type             | Default                                          | Description                                      |
|-----------------|------------------|------------------|--------------------------------------------------|--------------------------------------------------|
| `buttonLabel`   | `button-label`   | `string`         |                                                  | ARIA label attribute to pass down to the resulting button or a<br />element. This is required for accessibility if we use a button<br />with an icon only. |
| `buttonSize`    | `button-size`    | `string`         | "medium"                                         | The button size to use.                          |
| `buttonTarget`  | `button-target`  | `string`         |                                                  | The target to use for a link, used in conjunction with the url attribute. |
| `buttonUrl`     | `button-url`     | `string`         |                                                  | The url to use for a link. This will render an anchor element.<br />Do not set this prop if you want to render a button element. |
| `buttonVariant` | `button-variant` | `string`         | "primary"                                        | The button style variant to use.                 |
| `hasLeftIcon`   |                  | `boolean`        |                                                  |                                                  |
| `hasRightIcon`  |                  | `boolean`        |                                                  |                                                  |
| `isDisabled`    | `is-disabled`    | `boolean`        | false                                            | Whether the button is disabled. Only applies to<br />implementations not using the url property |
| `onClick`       | `onClick`        | `() => void`     |                                                  | A click handler to be passed only to onClick. DO NOT USE @click on this component. |
| `onKeyUp`       | `onKeyUp`        | `() => void`     |                                                  | A keyUp handler to be passed to the onKeyUp. DO NOT USE @keyup on this component. |
| `slots`         |                  | `SlotController` | "new SlotController(\n    this, // This, the host element.\n    false // To shift or not to shift LightDom nodes to ShadowDOM.\n  )" |                                                  |

## Methods

| Method         | Type                                             | Description                                      |
|----------------|--------------------------------------------------|--------------------------------------------------|
| `iconTemplate` | `(exists: boolean, slot: string): TemplateResult<ResultType> \| null` | Icon template<br /><br />**exists**: Whether the icon slot exists.<br />**slot**: The slot name to use. |

## Slots

| Name    | Description                         |
|---------|-------------------------------------|
|         | default slot, used for button text. |
| `left`  | slot used for left side icon.       |
| `right` | slot used for right side icon.      |

---
_Source: https://npm.io/package/@phase2/outline-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._