vira/dist/elements/vira-button.element.d.ts

A simple and highly versatile design system using element-vir.

import { type PartialWithUndefined } from '@augment-vir/common';
import { type ViraIconSvg } from '../icons/index.js';
import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/index.js';
import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
/**
 * A custom button with default styling.
 *
 * @category Button
 * @category Elements
 * @see https://electrovir.github.io/vira/book/elements/vira-button
 */
export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", PartialWithUndefined<{
    text: string;
    icon: Readonly<ViraIconSvg>;
    /** @default false */
    isDisabled: boolean;
    /**
     * Set a predefined emphasis variant. Set to `ViraEmphasis.None` for maximum customization.
     *
     * @default ViraEmphasis.Standard
     */
    buttonEmphasis: ViraEmphasis;
    /**
     * Set a predefined size variant. Set to `ViraSize.None` for maximum customization. In that
     * case, you will need to set a `height`.
     *
     * @default ViraSize.Medium
     */
    buttonSize: ViraSize;
    /**
     * Set a predefined color variant or a raw {@link ViraThemeColorName} (e.g.,
     * `ViraThemeColorName.blue`). Set to `ViraColorVariant.Custom` for maximum customization.
     * In that case, you will need to use this element's CSS vars to customize the colors.
     *
     * @default ViraColorVariant.Plain
     */
    color: ViraColorVariant | ViraThemeColorName;
    /**
     * Set to `true`
     *
     * @default false
     */
    showMenuCaret: boolean;
}>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-red" | "vira-button-color-yellow" | "vira-button-color-green" | "vira-button-color-blue" | "vira-button-color-brand" | "vira-button-color-purple" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-teal" | "vira-button-color-pink" | "vira-button-color-grey" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;