Messages to users, flashbags and buttons


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.


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>

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


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.