#50fa7b
"We’re not designing pages, we’re designing systems of components." -Stephen Hay
Regular
Light
Italic
Semibold
Bold
Almost before we knew it, we had left the ground.
#50fa7b
#f2405d
#ffb721
#000000
#b3b3b3
#e2e2e2
#ffffff
< atomic-button value="Digite seu texto">
< atomic-button value="Small" size="small">
< atomic-button value="Medium" size="medium">
< atomic-button value="Large" size="large">
< atomic-button value="Default" type="">
< atomic-button value="Primary" type="primary">
< atomic-button value="Danger" type="danger">
< atomic-button value="Warning" type="warning">
< atomic-button value="color: purple" color="purple">
< atomic-button value="font-color: #fff" color="purple" font-color="#fff">
< atomic-button value="Border Radius" border-radius="30px">
< atomic-button value="Width: 300px" width="300px">
Attribute | Type | Default | Options | Description |
---|---|---|---|---|
Value | String | Ex: "Texto do botão" | Texto dentro do botão | |
Size | String | Medium | small / medium / large | Define a proporção do botão |
Type | String | Default | primary / danger | Define o tipo |
Color | String | #ddd | Qualquer tipo de cor(red, #ff4455, rgb(23,154, 16)) | Define a cor do background |
Font-color | String | #333 | Qualquer tipo de cor, Ex: (red, #ff4455, rgb(23,154, 16)) | Define a cor da fonte |
Border-radius | String | 4px | Número + medida, Ex: (4px, 50%) | Define o radius da borda |
Width | String | Número + medida, Ex: (200px, 100%) | Define o tamanho do botão |