Skip to main content

Save buttons

Guidance for how to select button type, what props to use (color and size), whether to include an icon or not, what labels to use (e.g. Create vs Save), and when

When should I use a 'Save button'?

Save buttons are specific to CRUD operations. As there are obviously many places in Kibana that require creating, editing/updating something, the following are recommendations to help drive consistency.

  • Creating an object that can be edited / deleted
  • Updating or modifying settings

Consider using "Save" rather than "Update", "Create" or "Apply". Try to reserve the use of “Apply" for actions that do not permanently save data but rather temporarily apply changes.

How do I style it?

The save button should be the most dominant action and should be consistent in any context. It is recommended to follow the recommended styling to maintain a recognizable save action.

  • Use the fill prop
  • Match the sizing of form fields, but use the medium size where possible.
  • Use the primary color variant
  • Include the noun in the label. See the Writing Guidelines for more information
  • Avoid using icons where possible

Avoid using the default fill for the button

Saving should be the primary action in the user's context, so this button should be the most dominant. If multiple buttons or options, make sure the 'Save' button uses the fill prop.

Avoid using the success color variant

The save button should be the most dominant action in the view. By using our primary color and fill prop, it insures we keep these consistent wherever it is placed.

Avoid sizing the button differently than surrounding buttons or form fields

We should use the medium size button by default. However, use the same size button as other buttons in the group and the associated form inputs (m for default size form inputs, s for compressed forms).

Consider if an icon is necessary

While icons can provide context and additional visual cues to buttons, a Save button by principle should be styled so it is visually dominant. Therefore, it is likely less necessary to use an icon for these buttons compared to other actions within the page that can have similar weight to nearby buttons/actions.

The choice of the icon can also be difficult here. We have used a disk icon and a check icon with Save buttons within our UIs, but the meaning of these icons can be confusing. So our recommendation is to avoid the inconsistency here and rely solely on the label.

Exceptions to the rule: As with anything, there will be exceptions to these recommendations. One example is the EuiInlineEdit component which provides a save action without a label.