Buttons

Form buttons in various sizes. Buttons are always capitalised. Use the following classes:

    ## TODO: lisa: Are we actually using three sizes of buttons??
  • .btn-lg for large buttons
  • .btn-sm for small buttons
  • .btn-xs for xtra small buttons

Note that .btn-mini is supported for legacy reasons.

## TODO: johbo: Should also work without the form element
A link as button
A link as button
A link as button
Buttons of style .btn-link:

Buttons as Links

Most of our Edit/Delete buttons come in the following form. Inside of a table, these are "action buttons", and while an Edit link is a typical blue link, a Delete button is red as per the 'btn-danger' styling and use .btn-link.

We use "Delete" when the thing being deleted cannot be undone; "Reset", and "Revoke" are used where applicable.

Note: Should there be a need for a change in the wording, be aware that corresponding documentation may also need updating.

<a href="some-link" title="${_('Edit')}">${_('Edit')}</a> <button class="btn btn-link btn-danger" type="submit" onclick="return confirm('${_('Confirm to remove this field: Field')}');"> ${_('Delete')} </button>

Buttons disabled

Note that our application still uses the class .disabled in some places. Interim we support both but prefer to use the attribute disabled where possible.

## TODO: johbo: Should also work without the form element
Buttons of style .btn-link: