# ez-sidebar-button



<!-- Auto Generated Below -->


## Events

| Event     | Description                                       | Type                |
| --------- | ------------------------------------------------- | ------------------- |
| `ezClick` | Emitido sempre que o ez-sidebar-button é clicado. | `CustomEvent<void>` |


## Dependencies

### Used by

 - [ez-guide-navigator](../ez-guide-navigator)
 - [ez-sidebar-navigator](../ez-sidebar-navigator)

### Depends on

- [ez-icon](../ez-icon)

### Graph
```mermaid
graph TD;
  ez-sidebar-button --> ez-icon
  ez-guide-navigator --> ez-sidebar-button
  ez-sidebar-navigator --> ez-sidebar-button
  style ez-sidebar-button fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-sidebar-button--width | Define a largura do span do botão. | 
| --ez-sidebar-button--hover--width | Define a largura do span do botão quando passar o mouse em cima. | 
| --ez-sidebar-button--height | Define a altura do span do botão. | 
| --ez-sidebar-navigator-button--z-index | Define a camada em que o componente será exibido. | 
| --ez-sidebar-button--background-color--xlight | Define a cor de fundo do botão. | 
| --ez-sidebar-button--background-color--primary | Define a cor de fundo do span do botão. | 
| --ez-sidebar-button--space--small | Define um espaçamento pequeno entre elementos do componente. | 
| --ez-sidebar-button--space--medium | Define um espaçamento mediano entre elementos do componente. | 
| --ez-sidebar-button--box-shadow | Define a sombra default do botão. | 
| --ez-sidebar-button--hover--box-shadow | Define a sombra do botão quando passar o mouse em cima. | 
| --ez-sidebar-button--border--radius-small | Define a borda arrendondada no valor de 6px. | 
| --ez-sidebar-button--border--radius-medium | Define a borda arrendondada no valor de 12px. |