OG Framework Documentação

Button

Botões permitem aos utilizadores tomar decisões e realizar ações com um único toque. São o componente mais atómico da nossa interface.

Variantes

Abaixo estão as variantes padrão do Bootstrap 4 integradas no OfficeGest.

Tamanhos

Com Ícones

Utilização via PHP

No OfficeGest Framework, recomendamos o uso da classe helper UI para gerar botões consistentes.

// Botão simples
echo UI::Button('Primary', 'btn-primary');

// Botão com ícone
echo UI::Button('Adicionar', 'btn-primary', 'og-icon-plus');

// Botão com atributos extra
echo UI::Button('Eliminar', 'btn-danger', 'og-icon-trash', [
    'onclick' => 'confirmDelete(123)',
    'id' => 'btn-delete-item'
]);

HTML Puro (Legacy)

<button type="button" class="btn btn-primary">
    <i class="og-icon-plus mr-1"></i> Gravar
</button>

Do's

Use botões com labels claros e orientados à ação (ex: "Gravar" em vez de "OK").
Mantenha uma única ação primária por ecrã ou secção.
Use ícones para reforçar o significado da ação.

Don'ts

Não use botões primários para ações destrutivas (use btn-danger).
Não sobrecarregue a interface com demasiados botões de igual peso visual.
Evite labels de botão demasiado longos que causem quebra de linha.