Buttons

The styles of buttons can be applied on button or links. For any form, either in default pages, search screens, modal pop-ups, you can apply classes on your actions. Below are some examples.

Available classes

The default style for buttons and links is handled by the .button CSS class. For small areas, you can add the complementary .smallButton or .tinyButton CSS classes to reduce font-size and space.

.button link .button .smallButton

Buttons containers

In forms

The actions in forms are put after the form table, in a p .buttonsGadget class. This class will manage the space and alignment of your buttons.

Title

Under tabs

The available actions displayed just under the tabs are displayed in a .action_bar div class. Then, each action is listed in a ul list.

If you need an icon in your button to help user to quickly identify the action, in the a tag, use an img tag before the link label. The .button class is not mandatory, using it here will only change the margin.

Documents/page:
Mettre à jour Export Excel RSS ATOM

In titles

Depending of the inclusion of your .button in containers, buttons will be displayed in the same line as the main title. In these examples, actions are included in a .dropDownMenu .button .dropdown li class, in an .action_bar .directoryBack, and finally in a .widgetPanel .actionsWidgetPanel. For more details about actions in titles, check the Titles section.

My page title

My page title with a back link

Back to the list

Title & Actions

Add to collection
Favorite
Lock
Link

Other types

Users and groups, as well as tags, have a specific display, as they need to be easily identifiable. Users are displayed in a .tag .user span class. To have the group icon, just add a .group class. Tags are included in a .tag .tagLink span class. You can display the tag label only, or display an additional delete link next to it.