1.3.0 • Published 3 years ago
@wizsolucoes/wiz-button v1.3.0
💥 Wiz Button
Componente de Botão totalmente customizado seguindo as diretrizes do Design System Sys da Wiz.
Como usar
Instale o pacote NPM
npm i @wizsolucoes/wiz-buttonVeja como utilizar em cada Framework:
| Frameworks | Link |
|---|---|
| Angular | Link |
| React | Link |
| Vue | Link |
💠 Componente
<wiz-button>Click</wiz-button>🧾 Parâmetros
| Parâmetro | Tipo | Descrição | Default |
|---|---|---|---|
| color | "primary","secundary" | É possível escolher entre o botão primário ou secundário do SYS. | "primary" |
| disabled | boolean | Ao desejar desabilitar o botão deve-se usar o atributo 'disabled'. | false |
| responsive | "default-size", "full-width" | O parâmetro 'full-width' permite que o botão assuma 100% de largura, já o "default-size" permanece do tamanho definido no SYS. | "default-size" |
| shape | "square", "round" | É possível escolher a forma do botão, podendo ser "square" que não possui border-radius, ou "round" que possui border-radius. | "square" |
| size | "large", "medium", "small" | Os tamanhos dos botões são determinados através do SYS podendo escolher entre "large", "medium" ou "small". | "medium" |
| type | "button", "reset", "submit" | O tipo do botão determina o comportamento dele na interface, podendo ter variações entre "button", "reset" ou "submit". | "button" |
🌐 Global Styles
Caso deseje aplicar o estilo de cor próprio dos botões é necessário implementar cada cor desejada como variável global em seu projeto.
:root {
--primary-button: "#cor-primária";
--primary-button-hover: "#cor-primária-hover";
--secondary-button: "#cor-secundária";
--secondary-button-hover: "#cor-secundária-hover";
}