Dois estilos de botão: .btn-elegant-primary pra ação principal, .btn-elegant-outline pra ação secundária. Nunca mais de um botão primário por seção.
Primário — .btn-elegant.btn-elegant-primary
<button class="btn-elegant btn-elegant-primary" type="button">
Buscar produção
</button>Outline — .btn-elegant.btn-elegant-outline
<button class="btn-elegant btn-elegant-outline" type="button">
Cancelar
</button>Quando usar
Use para isso
- Uma ação primária por card/seção (
.btn-elegant-primary) - Ações secundárias/cancelamento ao lado da primária (
.btn-elegant-outline)
Não use para isso
- Dois botões primários lado a lado — sempre um primário + um outline
- Links de navegação simples — use
<a>com.nav-link-elegant, não botão