# Toolbar

Toolbar component can be imported from spreadsheet module using the following code. You can compose your own toolbar or even use a third-party component to render the buttons.

[Radix icons](https://icons.radix-ui.com/) are used for the toolbar buttons, but this can be easily swapped to any icon set by using custom components.

<figure><img src="https://67932947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHWsslZpYESUXxPccoyig%2Fuploads%2Fgit-blob-8c8a34bb1732efc9379955d4735e4c19095020c5%2Fimage.png?alt=media" alt=""><figcaption><p>Toolbar</p></figcaption></figure>

<pre class="language-tsx"><code class="lang-tsx"><strong>import {
</strong>  Toolbar,
  ButtonDecreaseDecimal,
  ButtonFormatCurrency,
  ButtonFormatPercent,
  ButtonIncreaseDecimal,
  ButtonRedo,
  ButtonUndo,
  ScaleSelector,
  ToolbarSeparator,
  BackgroundColorSelector,
  BorderSelector,
  ButtonBold,
  ButtonItalic,
  ButtonStrikethrough,
  ButtonUnderline,
  ButtonInsertImage,
  ButtonInsertLink,
  ButtonSwitchColorMode,
  ThemeSelector,
  TableActions,
  FontFamilySelector,
  FontSizeSelector,
  MergeCellsSelector,
  TextColorSelector,
  TextFormatSelector,
  TextHorizontalAlignSelector,
  TextVerticalAlignSelector,
  TextWrapSelector
} from "@rowsncolumns/spreadsheet";
import { Separator } from "@rowsncolumns/ui";

const App = () => {
  return (
    &#x3C;Toolbar>
      &#x3C;ButtonUndo />
      &#x3C;ButtonRedo />
      &#x3C;ToolbarSeparator />
      &#x3C;ScaleSelector />
      &#x3C;ToolbarSeparator />
      &#x3C;ButtonFormatCurrency />
      &#x3C;ButtonFormatPercent />
      &#x3C;ButtonDecreaseDecimal />
      &#x3C;ButtonIncreaseDecimal />
      &#x3C;TextFormatSelector />
      &#x3C;ToolbarSeparator />
      &#x3C;FontFamilySelector />
      &#x3C;ToolbarSeparator />
      &#x3C;FontSizeSelector />
      &#x3C;ToolbarSeparator />
      &#x3C;ButtonBold />
      &#x3C;ButtonItalic />
      &#x3C;ButtonUnderline />
      &#x3C;ButtonStrikethrough />
      &#x3C;TextColorSelector />
      &#x3C;ToolbarSeparator />
      &#x3C;BackgroundColorSelector />
      &#x3C;BorderSelector />
      &#x3C;MergeCellsSelector />
      &#x3C;ToolbarSeparator />
      &#x3C;TextHorizontalAlignSelector />
      &#x3C;TextVerticalAlignSelector />
      &#x3C;TextWrapSelector />
      
      &#x3C;ButtonInsertImage />
      &#x3C;ButtonInsertLink />
      &#x3C;ButtonSwitchColorMode />
      &#x3C;ThemeSelector />
      &#x3C;TableAction />
    &#x3C;/Toolbar>
  );
};
</code></pre>

## BottomBar

BottomBar component is a container for the footer of the Spreadsheet, which houses Sheet Tabs, Sheet Switcher, Sheet Status and NewSheetButton component
