Messages to users, flashbags and buttons

Flashbags

The four following levels are defined :

Key	Intent
alert	A message not linked with the user action, but which should require an action or a correction.
success	The user action succeeds.
notice	A simple message to give information to the user. The message may be linked or not linked with the user action.
warning	A message linked with an action, the user should correct.
error	The user’s action failed: he must correct something to process the action.

See also

Flash Messages on Symfony documentation

Learn how to use flash messages in controller.

Buttons

Some actions are available to decorate a links and buttons.

To add the action on button, use them as class along with sc-button :

<a class="sc-button bt-create">Create an entity</a>

<button class="sc-button bt-submit" type="submit">Submit</button>

Action	Class	Description
Submit	bt-submit	Submit a form. Use only if action is not “save”.
Create	bt-create or bt-new	Link to a form to create an entity (alias: bt-new) Submitting this form will create a new entity
Reset	bt-reset	Reset a form
Delete	bt-delete	Link to a form to delete an entity Submitting this form will remove the entity
Edit	bt-edit or bt-update	Link to a form to edit an entity
Save	bt-save	Submitting this form will save change on the entity
Action	bt-action	Generic link to an action
Cancel	bt-cancel	Cancel an action and go back to another page

Styling buttons

Small buttons, mainly to use inline

<p><a class="sc-button bt-create bt-small">You button</a></p>

You can omit content and show a button with an icon only :

<a class="sc-button bt-create"></a>

You can hide content and show it only on hover

<a class="sc-button bt-create has-hidden"><span class="show-on-hover">Showed when mouse pass on</span></a>

You can customize the icon :

<a class="sc-button bt-create change-icon"><i class="fa fa-icon"></i>Button with custom icon</a>

Grouping buttons

Grouping buttons can be done using ul.record_actions element (an ul list with class record_actions):

<ul class="record_actions">

   <li class="cancel">
      <a class="sc-button bt-cancel">Cancel</a>
   <li>

   <li>
      <a class="sc-button bt-save">Save</a>
   </li>

</ul>

The element with the cancel class will be set in first position.

Inside table, the space between elements will be shorter.

You can add the class record_actions_small if you want shorter space between elements.