# ez-button ## Properties | Property | Attribute | Description | Type | Default | | ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------- | | `enabled` | `enabled` | ⚠️ **[DEPRECATED]** Use `isDisabled` prop instead.Se false o usuário não pode interagir com o botão. | `boolean` | `true` | | `iconName` | `icon-name` | Define o ícone a ser usado da biblioteca de ícones: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html) | `string` | `undefined` | | `image` | `image` | Define o caminho usado nos modos `icon` e `label-icon` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` | | `isDisabled` | `is-disabled` | Se verdadeiro o clique no botão fica desabilitado mas a navegação continua funcional. Se full, o usuário não pode interagir com o botão. | `"" \| "full" \| boolean` | `false` | | `label` | `label` | Texto a ser apresentado como título do botão. | `string` | `undefined` | | `leftIconName` | `left-icon-name` | Define o ícone esquerdo do ez-button. Tem prioridade sobre o slot `leftIcon`. | `string` | `undefined` | | `mode` | `mode` | Define o modo de uso do botão. | `"icon" \| "label-icon" \| "link" \| "regular"` | `"regular"` | | `rightIconName` | `right-icon-name` | Define o ícone direto do ez-button. Tem prioridade sobre o slot `rightIcon`. | `string` | `undefined` | | `size` | `size` | Define o tamanho do ez-button. | `"large" \| "medium" \| "small" \| "x-small"` | `"medium"` | | `suppressAnimation` | `suppress-animation` | Se verdadeiro, desabilita a animação de ripple. | `boolean` | `false` | | `type` | `type` | Define o tipo do botão. Pode ser `button`, `submit` ou `reset`. | `string` | `"button"` | | `variant` | `variant` | Define a variante do ez-button. | `"primary" \| "secondary" \| "tertiary"` | `undefined` | ## Methods ### `setBlur() => Promise` Remove o foco do botão. #### Returns Type: `Promise` --- ### `setFocus() => Promise` Aplica o foco no botão. #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-actions-button](../ez-actions-button) - [ez-alert-list](../ez-alert-list) - [ez-dialog](../ez-dialog) - [ez-double-list](../ez-double-list) - [ez-grid](../ez-grid) - [ez-guide-navigator](../ez-guide-navigator) - [ez-modal-container](../ez-modal-container) - [ez-pagination](../ez-pagination) - [ez-popup](../ez-popup) - [ez-sidebar-navigator](../ez-sidebar-navigator) - [ez-split-item](../ez-split-panel/structure/item) - [ez-text-edit](../ez-text-edit) - [ez-tile-medium](../ez-tile-medium) - [filter-column](../ez-grid/subcomponents) ### Depends on - [ez-icon](../ez-icon) ### Graph ```mermaid graph TD; ez-button --> ez-icon ez-actions-button --> ez-button ez-alert-list --> ez-button ez-dialog --> ez-button ez-double-list --> ez-button ez-grid --> ez-button ez-guide-navigator --> ez-button ez-modal-container --> ez-button ez-pagination --> ez-button ez-popup --> ez-button ez-sidebar-navigator --> ez-button ez-split-item --> ez-button ez-text-edit --> ez-button ez-tile-medium --> ez-button filter-column --> ez-button style ez-button fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-button--min-width | Define a largura mínima do componente. | | --ez-button--width | Define a largura do componente. | | --ez-button--height | Define a altura do componente. | | --ez-button--padding-top | Define o espaçamento superior ao label. | | --ez-button--padding-bottom | Define o espaçamento inferior ao label. | | --ez-button--padding-right | Define o espaçamento à direita do label. | | --ez-button--padding-left | Define o espaçamento à esquerda do label. | | --ez-button--icon--gap | Define o gap entre o texto e ícone, quando existir. | | --ez-button--color | Define a cor do label. | | --ez-button--label-icon--color | Define a cor do label do botao tipo label-icon. | | --ez-button--label-icon--hover-color | Define a cor do label do botao tipo label-icon, quando o mouse sobre o botão. | | --ez-button--label-icon--disabled-color | Define a cor do label do botao tipo label-icon, quando desabilitado. | | --ez-button--left-icon--color | Define a cor do icone esquerdo. | | --ez-button--right-icon--color | Define a cor do icone direito, quando o mouse está sobre o botão. | | --ez-button--left-icon--hover-color | Define a cor do icone esquerdo. | | --ez-button--right-icon--hover-color | Define a cor do icone direito, quando o mouse está sobre o botão. | | --ez-button--left-icon--disabled-color | Define a cor do icone esquerdo, quando desabilitado. | | --ez-button--right-icon--disabled-color | Define a cor do icone direito, quando desabilitado. | | --ez-button--font-size | Define o tamanho do label. | | --ez-button--font-family | Define a família da fonte do label. | | --ez-button--font-weight | Define o peso da fonte do label. | | --ez-button--background-color | Define a cor de fundo do botão. | | --ez-button--border-radius | Define o raio da borda do botão. | | --ez-button--border | Define o estilo da borda do botão. | | --ez-button--hover--border | Define o estilo da borda do botão quando em hover. | | --ez-button--justify-content | Define o alinhamento horizontal do conteúdo do botão. | | --ez-button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. | | --ez-button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. | | --ez-button--disabled-color | Define a cor do texto quando o botão está desabilitado. | | --ez-button--disabled--background-color | Define a cor de fundo quando o botão está desabilitado. | | --ez-button--disabled--border | Define a cor da borda quando o botão está desabilitado. | | --ez-button--disabled-icon-color | Define a cor do icone quando o botão está desabilitado. | | --ez-button--link-color | Define a cor do texto do botão no modo link. | | --ez-button--link--hover-color | Define a cor do texto do botão no hover do modo link. | | --ez-button--link-disabled-color | Define a cor do texto do botão no hover do modo link, quando desabilitado. | | --ez-button--link--small--font-size | Define o tamanho small na fonte do texto do botão no modo link. | | --ez-button--link--medium--font-size | Define o tamanho medium na fonte do texto do botão no modo link. | | --ez-button--link--large--font-size | Define o tamanho large na fonte do texto do botão no modo link. |