2.0.1 • Published 4 years ago
@chameleon-ds/button v2.0.1
Chameleon Button
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
Default
export const Default = () => html`<chameleon-button>Login</chameleon-button>`;
Secondary Theme
export const SecondaryTheme = () =>
html`<chameleon-button theme="secondary">Login</chameleon-button>`;
Text Theme
export const TextTheme = () =>
html`<chameleon-button theme="text">Login</chameleon-button>`;
Text with Icon
const heartIconLeft = svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart" slot="icon-left"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
export const TextWithIcon = () =>
html`<chameleon-button theme="text" icon-left
>${heartIconLeft} Love</chameleon-button
>`;
Icon Only
const heartIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart" slot="icon-left"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
export const IconOnly = () =>
html`<chameleon-button theme="text" icon-only
>${heartIcon}</chameleon-button
>`;
2.0.1
4 years ago
2.0.0
4 years ago
1.4.7
4 years ago
1.4.6
4 years ago
1.4.5
4 years ago
1.4.2
4 years ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.9
4 years ago
1.3.6
4 years ago
1.3.5
4 years ago
1.3.4
4 years ago
1.3.3
4 years ago
1.3.2
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.13
5 years ago
0.1.12
5 years ago
0.1.10
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.1
5 years ago