Chameleon Button

``js script
import { html, svg } from "lit-html";
import "./chameleon-button.js";

export default {
title: "Components|Buttons/Button",
component: "chameleon-button",
options: { selectedPanel: "storybookjs/docs/panel" },
};
`

Properties

| Property Name | Type(s) | Default Value | Description |
| ------------- | ------- | ------------- | ----------------------------------------------------------- |
| disabled | Boolean | false | Whether or not the button is disabled |
| loading | Boolean | false | When true, a loading spinner will display |
| theme | String | "primary" | The theme of the button ("primary", "secondary", or "text") |
| icon-left | Boolean | false | When true, will display a left icon |
| icon-right | Boolean | false | When true, will display a right icon |
| icon-only | Boolean | false | When true, will display only an icon |
| href | String | null | The link href |
| target | String | "_top" | The link target |

Examples

$3

`js preview-story
export const Default = () => htmlLogin;
`

$3

`js preview-story
export const SecondaryTheme = () =>
htmlLogin;
`

$3

`js preview-story
export const TextTheme = () =>
htmlLogin;
`

$3

`js preview-story
const heartIconLeft = svg;

export const TextWithIcon = () =>
html >${heartIconLeft} Love >;
`

$3

`js preview-story
const heartIcon = svg;

export const IconOnly = () =>
html >${heartIcon} >;
``