Add notebook toolbar button example.

tutorial/notebook.md

@@ -26,6 +26,75 @@ We'll walk through two notebook extensions.
 
 ### Adding a button to the toolbar
 
+Create a `src/mybutton/plugin.ts` file with the following contents.
+
+```typescript
+import {
+  IWidgetExtension, IDocumentContext, IDocumentModel, DocumentRegistry
+} from '../docregistry';
+
+import {
+  IDisposable, DisposableDelegate
+} from 'phosphor-disposable';
+
+import {
+  NotebookPanel
+} from '../notebook/notebook/panel';
+
+import {
+  Application
+} from 'phosphide/lib/core/application';
+
+import {
+  ToolbarButton
+} from '../notebook/notebook/toolbar';
+
+/**
+ * The plugin registration information.
+ */
+export
+const widgetExtension = {
+  id: 'jupyter.extensions.newButton',
+  requires: [DocumentRegistry],
+  activate: activateExtension
+};
+
+export
+class ButtonExtension implements IWidgetExtension<NotebookPanel>{
+  /**
+   * Create a new extension object.
+   */
+  createNew(nb: NotebookPanel, model: IDocumentModel,
+            context: IDocumentContext): IDisposable {
+    let button = new ToolbarButton('myButton', () => {
+      // Action when button is pressed. We could modify
+      // the notebook, etc.
+      alert('hi');
+    }, 'Tooltip');
+    let i = document.createElement('i');
+    i.classList.add('fa', 'fa-diamond')
+    button.node.appendChild(i);
+
+    nb.toolbar.add('mybutton', button, 'cellType')
+    return new DisposableDelegate(() => {
+      button.dispose();
+    })
+  }
+}
+
+/**
+ * Activate the extension.
+ */
+function activateExtension(app: Application, registry: DocumentRegistry) {
+  registry.registerExtension('Notebook', new ButtonExtension());
+}
+```
+
+Then add this extension to the JupyterLab extension list and relaunch JupyterLab:
+
+```typescript
+    require('jupyterlab/lib/mybutton/plugin').widgetExtension,
+```
 
 
 ### The ipywidgets extension