@govbr-ds/webcomponents/dist/types/components/button/button.d.ts

Biblioteca de Web Components baseado no GovBR-DS

/**
 * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).
 *
 * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.
 * @part button - Elemento button interno. Use para aplicar estilos customizados através de ::part(button).
 *
 * @example
 * Uso básico:
 * ```html
 * <br-button id="meu-botao" emphasis="primary">Clique aqui</br-button>
 * ```
 *
 * @example
 * Customizando com CSS Parts:
 * ```css
 * .meu-botao::part(button) {
 *   padding: 1rem 2rem;
 *   border-radius: 8px;
 * }
 * ```

* **Atenção**:
* - `margin` aplicado diretamente ao `<br-button>` é seguro para espaçamento externo e **não afeta a área clicável** do botão. Pode ser usado para separar o botão de outros elementos.
* - `padding` aplicado diretamente ao `<br-button>` **expande a área clicável** além do botão visível, pois o host do componente recebe o padding. Para espaçamento interno, use as propriedades do componente (`density`, `shape`) ou estilize via `::part(button)`.
* - Recomenda-se o uso de `margin` para espaçamento externo e `padding` via `::part(button)` para espaçamento interno.
*
* @example
 * Layout externo (para espaçamento entre componentes):
* ```html
* <br-button class="m-3" emphasis="primary">Botão com margin</br-button>
* ```
 *
 * @example
 * Layout externo (para espaçamento entre componentes):
 * ```html
 * <div class="wrapper">
 *   <br-button emphasis="primary">Botão</br-button>
 * </div>
 * ```
 *
 * ```css
 * .wrapper {
 *   margin: 1rem;
 * }
 * ```
 *
 */
export declare class Button {
    /**
     * Referência ao elemento host do componente.
     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
     */
    el: HTMLBrButtonElement;
    elementInternals: ElementInternals;
    /**
     * Define se o botão usará um esquema de cores escuro.
     */
    readonly colorMode: 'dark';
    /**
     * Identificador único.
     * Caso não seja fornecido, um ID gerado automaticamente será usado.
     */
    readonly customId: string;
    /**
     * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
     */
    readonly density: 'large' | 'medium' | 'small';
    /**
     * Desativa o botão, tornando-o não interativo.
     */
    readonly disabled: boolean;
    /**
     * Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.
     */
    readonly emphasis: 'primary' | 'secondary' | 'tertiary';
    /**
     * Indica se o botão está no estado ativo.
     * Se definido como verdadeiro, o botão será exibido como ativo.
     */
    readonly isActive: boolean;
    /**
     * Aplica o estado de "progresso" ao botão.
     * O botão exibirá um indicador de carregamento ou progresso.
     */
    readonly isLoading: boolean;
    /**
     * Define o formato do botão.
     * Valores possíveis:
     * - 'circle': Botão com formato circular.
     * - 'block': Botão com formato ovalado ocupando toda a largura disponível.
     * - 'pill': Botão com formato ovalado, com bordas arredondadas.
     */
    readonly shape: 'circle' | 'block' | 'pill';
    /**
     * Define o tipo de botão, especificando seu comportamento padrão.
     * Valores possíveis:
     * - 'button': Um botão padrão.
     * - 'reset': Um botão para redefinir o formulário.
     * - 'submit': Um botão para enviar o formulário.
     */
    readonly type: 'button' | 'reset' | 'submit';
    /**
     * Define o valor inicial do botão em um formulário.
     */
    readonly value: string;
    /**
     * Define o rótulo acessível do botão.
     * Este rótulo é usado por tecnologias assistivas para descrever a função do botão.
     * É especialmente importante para botões com formato circular, onde o texto pode não ser visível.
     * Se o botão não tiver um rótulo acessível, uma mensagem de aviso será exibida no console.
     */
    readonly ariaLabel: string;
    /**
     * Define o estado de pressionado do botão.
     * Este atributo é usado para indicar se o botão está atualmente pressionado ou não.
     * É especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado.
     * O valor deve ser 'true' ou 'false'.
     */
    readonly ariaPressed: string;
    private readonly handleClick;
    componentDidLoad(): void;
    private getCssClassMap;
    render(): any;
}