Botões

Botões

Os componentes do arquivo globals/buttons.ts são botões usados em toda a aplicação. Para todos os botões, você pode passar as seguintes propriedades:

Prop	Tipo	Descrição	Exemplo
small	boolean	Define o botão como pequeno	true
large	boolean	Define o botão como grande	false
success	boolean	Define a cor do botão para success	true
warning	boolean	Define a cor do botão para warning	true
caution	boolean	Define a cor do botão para Caution	true
disabled	boolean	Define se o botão está desabilitado	true
outlined	boolean	Define se o botão terá um outline	true
add	boolean	Define se o botão será usado para adicionar itens em uma lista	true
width	boolean	Define a largura do botão (em px)	true
height	boolean	Define a altura do botão (em px)	true

BaseButton

Componente base para todos os outros botões. Extenda-o para criar um novo botão, se necessário. Não utilizável em páginas.

SmallButton

Botão pequeno

Normal

Normal

<SmallButton>Continuar</SmallButton>

Success

Success

<SmallButton success>Continuar</SmallButton>

Caution

Caution

<SmallButton caution>Voltar</SmallButton>

Warning

Warning

<SmallButton warning>Cancelar</SmallButton>

LargeButton

Botão grande.

Normal

Normal

<LargeButton>Continuar</LargeButton>

Success

Success

<LargeButton success>Continuar</LargeButton>

Caution

Caution

<LargeButton caution>Voltar</LargeButton>

Warning

Warning

<LargeButton warning>Cancelar</LargeButton>

FullButton

Botão que ocupa toda a largura de seu componente pai.

Normal

Normal

<FullButton>Continuar</FullButton>

Success

Success

<FullButton success>Continuar</FullButton>

Caution

Caution

<FullButton caution>Voltar</FullButton>

Warning

Warning

<FullButton warning>Cancelar</FullButton>

IconButton

Botão usado como base para criar botões com ícone. Usado da seguinte forma:

function BotaoGoogle({children}) {
    return (
        <IconButton>
            <FcGoogle />
            {children}
        </IconButton>
    )
}

Dica

Para dar cores ou tamanhos personalizados ao botão com ícone, extenda o componente IconButton e use-o como container.

OutlinedIconButton

Botão com borda e ícone.

    <OutlinedIconButton> 
        <WalletIcon size="16" /> Botão com ícone
    </OutlinedIconButton>

ExportButton

Botão usado para exportação de planilhas nas páginas de listagem. Recebe os seguintes props:

Prop	Tipo	Descrição	Exemplo
label	string	Texto do botão	Exportar
icon	Componente	Ícone do botão	"MdSaveAlt"
width	number / string	Largura do botão	32
height	number / string	Altura do botão	64

    <ExportButton 
        height="32" 
        icon={<MdSaveAlt />} 
        label="Exportar"
        //Função para exportar
        onClick={() => {}}
    />