ATLButton
Esta molécula foi desenhada para conter um gatilho de ação na forma de Botão.
Para visitar a documentação de design desta molécula, clique aqui.
Exemplo de uso:
import { ATLButton } from '@appsimples/atlantica-react-native'
...
<ATLButton
title={'Meu botão'}
onPress={onPressButton}
/>
Props
icon
Pequeno ícone que aparece dentro do botão e à esquerda do texto.
| Tipo | Obrigatório |
|---|---|
| ImageSourcePropType | Não |
title
Texto que aparece dentro do botão.
| Tipo | Obrigatório |
|---|---|
| string | Sim |
onPress
Handler que será chamado quando o usuário apertar o botão.
| Tipo | Obrigatório |
|---|---|
| function | Sim |
complementary
Variação complementar da molécula a ser usada quando o fundo da tela é da cor ColorPrimary.
| Tipo | Obrigatório |
|---|---|
| boolean | Não |
disabled
Se for true, desabilita todas as interações com o componente.
| Tipo | Obrigatório |
|---|---|
| boolean | Não |
outlined
Muda o estilo do botão para um uso hierarquicamente secundário.
| Tipo | Obrigatório |
|---|---|
| boolean | Não |
horizontalMargin
Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal externa aos elementos da molécula.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
| Prop | Token | Default Value |
|---|---|---|
| horizontalMargin | SpacingMarginal | 16 |
verticalMargin
Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical externa aos elementos da molécula.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
| Prop | Token | Default Value |
|---|---|---|
| verticalMargin | SpacingBase | 8 |
buttonBaseProps
Caso seja necessário mudar alguma propriedade base do átomo de botão, é possível através da modificação das buttonBaseProps.
Abaixo temos uma tabela com todas as props do botão, os tokens aos quais estão relacionadas e o seu valor padrão.
| Props | Token | Default Value |
|---|---|---|
| borderColor | ColorPrimary | #A94CC9 |
| borderRadius | BorderRadiusButton | 10 |
| borderWidth | BorderWidthButton | 1 |
| buttonColor | ColorPrimary | #A94CC9 |
| buttonHeight | HeightButtonBase | 32 |
| disabledOpacity | OpacityDisabled | 0.3 |
| fontFamily | FontFamilyBase | undefined |
| fontSize | FontSizeButton | 12 |
| fontWeight | FontWeightStrong | Bold (700) |
| iconPadding | SpacingBase | 8 |
| iconSize | SizeButtonIcon | 24 |
| textCase | TextCaseButton | Uppercase |
| textColorOutlined | ColorPrimary | #A94CC9 |
| textColorRegular | ColorComplementary | #FFFFFF |
Para mais informações, acesse ATLButtonBase.