@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
99 lines • 2.92 kB
TypeScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { LitElement, type TemplateResult } from 'lit';
declare const BaseButton_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<typeof LitElement, import("../../utils/behaviors/element-internals").WithElementInternals>>;
/**
* Supports inserting icon and label buttons.
*
* There are two implementations:
* - mdc-button
* - mdc-toggle-button
*
* Available in 5 variants:
* - filled (default)
* - filled-tonal
* - elevated
* - outlined
* - text
*
* ```html
* <mdc-button variant="filled-tonal"></mdc-button>
* <mdc-toggle-button variant="filled-tonal"></mdc-toggle-button>
* ```
*
* Available in 5 sizes:
* - extra-small
* - small (default)
* - medium
* - large
* - extra-large
*
* ```html
* <mdc-button size="medium"></mdc-button>
* <mdc-toggle-button size="medium"></mdc-toggle-button>
* ```
*
* Each button is available in 2 shapes:
* - round (default)
* - square
*
* ```html
* <mdc-button shape="round"></mdc-button>
* <mdc-toggle-button shape="square"></mdc-toggle-button>
* ```
*
* @see
* When passing in a tag, make sure your tag is an HTMLElement and not a text node:
*
* ```html
* <mdc-button>
* <span>Delete</span>
* <mdc-icon slot="icon">delete</mdc-icon>
* </mdc-button>
* ```
*
* @version
* Material Design 3 - Expressive
*
* @link
* https://m3.material.io/components/buttons/overview
* https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=57994-696&t=kLfic7eA8vKtkiiO-0
*/
export declare abstract class BaseButton extends BaseButton_base {
variant: 'filled' | 'filled-tonal' | 'elevated' | 'outlined' | 'text';
size: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
trailingIcon: boolean;
shape: 'round' | 'square';
abstract disabled: boolean;
disableMorph: boolean;
protected hasIcon: boolean;
protected hasLabel: boolean;
protected readonly buttonElement: HTMLElement | null;
focus(): void;
blur(): void;
constructor();
protected getRenderClasses(): {
[x: string]: boolean;
container: boolean;
'has-icon': boolean;
'has-label': boolean;
'disable-morph': boolean;
disabled: boolean;
};
protected render(): TemplateResult;
protected renderBackground(): TemplateResult<1>;
protected renderElevation(): unknown;
protected renderOutline(): unknown;
protected renderContent(): TemplateResult<1>;
protected renderIcon(): TemplateResult<1>;
protected renderLabel(): TemplateResult<1>;
protected renderTouchTarget(): TemplateResult<1>;
protected handleClick(e: MouseEvent): void;
private handleIconSlotChange;
private handleLabelSlotChange;
}
export {};
//# sourceMappingURL=base-button.d.ts.map