From 2bba93d80eaff7adc59c26bb6b9499526f35a3fa Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Fri, 1 Jun 2018 12:27:05 +0100
Subject: [PATCH] update toolbar docs (#3423)

---
 docs/core/toolbar.component.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/core/toolbar.component.md b/docs/core/toolbar.component.md
index 99b1d0082b..5d6fec1175 100644
--- a/docs/core/toolbar.component.md
+++ b/docs/core/toolbar.component.md
@@ -80,6 +80,28 @@ You can divide groups of elements with a visual separator `<adf-toolbar-divider>
 </adf-toolbar>
 ```
 
+### Spacer
+
+You can provide a separate element with `adf-toolbar--spacer` class name
+to fill the empty space and move the content to the right of the toolbar if needed:
+
+```html
+<adf-toolbar>
+    <adf-toolbar-title>
+        ...
+    <adf-toolbar-title>
+    
+    <div class="adf-toolbar--spacer"></div>
+
+    <button></button>
+    <adf-toolbar-divider></adf-toolbar-divider>
+    <button></button>
+</adf-toolbar>
+```
+
+In the example above, the toolbar title element is rendered to the left,
+but all the buttons are pushed to the right side.
+
 ### Dropdown menu
 
 You can use the following example to create a dropdown menu: