LteButton

Para usar o componente botão importe-o para o seu scrit e use-o com a assinatura abaixo:

<lte-button>clique aqui</lte-button>

Tipos

Opcionalmente o componente button tem 6 tipos:

Tipo Real Código
info <lte-button type='info'>clique aqui</lte-button>
danger <lte-button type='danger'>clique aqui</lte-button>
warning <lte-button type='warning'>clique aqui</lte-button>
success <lte-button type='success'>clique aqui</lte-button>
primary <lte-button type='primary'>clique aqui</lte-button>
default <lte-button>clique aqui</lte-button> ou <lte-button type='default'>clique aqui</lte-button>

A propriedade "type" recebe um valor do tipo String, e é opcional. Caso a propriedade type não seja especificada, o componente será tratado como default.

Tamanhos

Opcionalmente o componente button tam 3 tamanhos diferentes:

Tamanho Real Código
xs <lte-button size='xs'>clique aqui</lte-button>
sm <lte-button size='sm'>clique aqui</lte-button>
lg <lte-button size='lg'>clique aqui</lte-button>

A propriedade "size" recebe um valor do tipo String, e é opcional.

Fundos

Opcionalmente o componente button tem 5 fundos diferentes:

Fundo Real Código
maroon <lte-button bg='maroon'>clique aqui</lte-button>
purple <lte-button bg='purple'>clique aqui</lte-button>
navy <lte-button bg='navy'>clique aqui</lte-button>
orange <lte-button bg='orange>clique aqui</lte-button>
olive <lte-button bg='olive'>clique aqui</lte-button>

A propriedade "bg" recebe um valor do tipo String, e é opcional. Recomenda-se não usar com a propriedade "type" devido as cores de borda entrarem em conflito.

Estilo Block

Para o componente ficar com estilo block, adicione a propriedade block como true:

<lte-button :block="true">clique aqui</lte-button>

A propriedade block é opcional e do tipo Boolean.

Estilo Flat

Para o componente ficar com estilo flat, de cantos em ângulo reto, adicione a propriedade flat como true:

<lte-button :flat="true">clique aqui</lte-button>

A propriedade flat é opcional e do tipo Boolean.

Estilo Desabilitado

Para o componente ficar desabilitado, adicione disabled como true:

<lte-button :disabled="true">clique aqui</lte-button>

A propriedade disabled é opcional e do tipo Boolean.

Estilo App

Para o componente ficar com estilo app, quadrado, adicione app como true:

<lte-button :app="true">clique aqui</lte-button>
clique aqui

A propriedade app é opcional e do tipo Boolean. Recomenda-se adicionar um ícone com o texto para ficar melhor representado na tela.

Social Button

O componente button também tem propriedades para indicar redes sociais:

Rede social Real Código
bitbucket clique aqui <lte-button :social='true' social-network='bitbucket'>clique aqui</lte-button>
dropbox clique aqui <lte-button :social='true' social-network='dropbox'>clique aqui</lte-button>
facebook clique aqui <lte-button :social='true' social-network='facebook'>clique aqui</lte-button>
flickr clique aqui <lte-button :social='true' social-network='flickr'>clique aqui</lte-button>
foursquare clique aqui <lte-button :social='tru' social-network='foursquare'>clique aqui</lte-button>
github clique aqui <lte-button :social='true' social-network='github'>clique aqui</lte-button>
google clique aqui <lte-button :social='true' social-network='google'>clique aqui</lte-button>
instagram clique aqui <lte-button :social='true' social-network='instagram'>clique aqui</lte-button>
linkedin clique aqui <lte-button :social='true' social-network='linkedin'>clique aqui</lte-button>
tumblr clique aqui <lte-button :social='true' social-network='tumblr'>clique aqui</lte-button>
twitter clique aqui <lte-button :social='true' social-network='twitter'>clique aqui</lte-button>
vk clique aqui <lte-button :social='true' social-network='vk'>clique aqui</lte-button>

Onde a propriedade social é do tipo Boolean. Se ela for verdadeira uma rede social deve ser indicada na propriedade social-network, propriedade esta que é do tipo String. Se a propriedade social for verdadeira e nenhuma rede social for indicada conforme anteriormente citado, ela assumirá um valor default: 'bitbucket'.