import type { Appearance } from '../../../Types/Appearance'; import type { Variant } from '../../../Types/Variant'; import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement'; import type { IButtonElementProps } from './IButtonElementProps'; import type { IButtonLinkElementProps } from './IButtonLinkElementProps'; declare const ButtonElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/ContentAlignable").IContentAlignableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Busyable").IBusyableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Iconable").IIconableProps) & typeof ButtonBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Button - A versatile interactive element for triggering actions and user interactions. * * @description * The Button component is a fundamental user interface element that provides interactive * functionality within applications. It supports various configurations including text labels, * icons, busy states, different orientations, and content alignment options. The button can * function as a traditional button, a link, or a download trigger, making it highly versatile * for different use cases. It includes advanced features like ripple effects, focus rings, * progress indicators, and comprehensive accessibility support. * * @name Button * @element mosaik-button * @category Buttons * * @slot label - The text content or label displayed on the button * @slot icon - The icon displayed alongside or instead of the label * @slot overlay - Additional overlay content such as badges or indicators * * @csspart button - The main button element container * @csspart link - The link element when href is provided * @csspart focusRing - The focus indicator ring for keyboard navigation * @csspart ripple - The touch feedback ripple effect container * @csspart icon - The icon display area within the button * @csspart label - The text label display area within the button * @csspart progressRing - The busy state progress indicator * * @cssprop {String} --button-font-family - The font family for button text * @cssprop {String} --button-font-size - The font size for button text * @cssprop {String} --button-font-line-height - The line height for button text * @cssprop {String} --button-font-weight - The font weight for button text * @cssprop {String} --button-font-letter-spacing - The letter spacing for button text * @cssprop {String} --button-font-text-decoration - The text decoration style * @cssprop {String} --button-font-text-transform - The text transformation style * @cssprop {String} --button-padding-top - The top padding inside the button * @cssprop {String} --button-padding-right - The right padding inside the button * @cssprop {String} --button-padding-bottom - The bottom padding inside the button * @cssprop {String} --button-padding-left - The left padding inside the button * @cssprop {String} --button-gap - The spacing between icon and label elements * @cssprop {String} --button-transition-duration - The duration of hover/focus transitions * @cssprop {String} --button-transition-mode - The timing function for transitions * @cssprop {String} --button-transition-property - The CSS properties to transition * @cssprop {Color} --button-foreground-color - The text and icon color * @cssprop {Color} --button-background-color - The background fill color * @cssprop {Color} --button-border-color - The border outline color * @cssprop {String} --button-border-width - The border thickness * @cssprop {String} --button-border-radius - The corner rounding radius * @cssprop {String} --button-border-style - The border line style * @cssprop {String} --button-shadow - The drop shadow or elevation effect * @cssprop {String} --button-width - The button width (when not using fit behavior) * @cssprop {String} --button-height - The button height * @cssprop {String} --focus-ring-outward-offset - The focus ring distance from button edge * @cssprop {String} --button-focus-ring-color - The focus ring color * @cssprop {String} --button-progress-thickness - The busy state progress ring thickness * * @dependency {StackElement} - Layout container for organizing button content * @dependency {IconElement} - Icon display component for button graphics * @dependency {RippleElement} - Touch feedback effect component * @dependency {FocusRingElement} - Keyboard focus indicator component * @dependency {TextElement} - Text rendering component for button labels * @dependency {ProgressRingElement} - Progress indicator for busy states * * @example * Basic button with label: * ```html * * ``` * * @example * Button with variant and appearance: * ```html * * ``` * * @example * Disabled button: * ```html * * ``` * * @example * Busy/loading button: * ```html * * ``` * * @example * Vertical button layout: * ```html * * ``` * * @public */ export declare class ButtonElement extends ButtonElement_base implements IButtonElementProps, IButtonLinkElementProps { private readonly _inheritance; private _href; private _download; private _rel; private _target; /** * Constructs a new instance of the `ButtonElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * @inheritdoc * When used inside a ButtonGroup, inherits the group's disabled state unless explicitly set. * * @public * @override */ get disabled(): boolean; set disabled(value: boolean); /** * @inheritdoc * When used inside a ButtonGroup, inherits the group's appearance unless explicitly set. * * @public * @override */ get appearance(): Appearance; set appearance(value: Appearance); /** * @inheritdoc * When used inside a ButtonGroup, inherits the group's variant unless explicitly set. * * @public * @override */ get variant(): Variant; set variant(value: Variant); /** * Gets or sets the `href` property. * * @public */ get href(): string; set href(value: string); /** * Gets or sets the `download` property. * * @public */ get download(): string; set download(value: string); /** * Gets or sets the `rel` property. * * @public */ get rel(): string; set rel(value: string); /** * Gets or sets the `target` property. * * @public */ get target(): string; set target(value: string); /** * @protected */ protected onHrefPropertyChanged(_prev: string, next: string): void; } /** * @public */ export declare namespace ButtonElement { type Props = IButtonElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-button': ButtonElement; } } export {}; //# sourceMappingURL=ButtonElement.d.ts.map