> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/containers/toolbar.md).

# Toolbar

Place the most frequently used and useful actions on the toolbar. You can place some toolbars  on the page - common toolbar for application and toolbars for other purposes. 

It is best when the toolbar shows actions that are relevant in the current context. For example, when user is working on text, it is good idea to show actions for text formatting. 

```tsx
import { Toolbar, ToolbarGroup, ToolbarAction, Icon } from 'altrone-ui';

const MENU = [{
    label: "Main menu",
    submenu: [{
        title: "Help",
        onClick: () => null
    }, {
        title: "About the app",
        onClick: () => null
    }]
}]

return <Toolbar menu={MENU}>
    <ToolbarGroup align={Align.start}>
        <ToolbarAction icon={<Icon i="view_sidebar" />} label="View" />
        <ToolbarAction icon={<Icon i="zoom_in" />} label="Zoom" />
        <ToolbarAction icon={<Icon i="add" />} label="Add slide" />
    </ToolbarGroup>
    <ToolbarGroup>
        <ToolbarAction icon={<Icon i="play_arrow" />} />
    </ToolbarGroup>
</Toolbar>
```

## Variants

In Altrone 2.0 was added `variant` prop. This prop set the appearance of the toolbar. There are two different variants for Toolbar: `default` and `compact`.&#x20;

Default Toolbar is large and can take a lot of place on the screen but this variant is great to use as main toolbar for the application.

Compact variant is better to use for a small toolbars. For example, when user selected a picture on the screen, you can show special compact toolbar of actions for manipulating the picture.&#x20;

### <mark style="color:blue;">ToolbarVariant</mark>

```typescript
enum ToolbarVariant {
  default = 'default',
  compact = 'compact'
}
```

## Toolbar Groups

Toolbar consists of toolbar actions. But you can group your toolbar actions into groups via ToolbarGroup component.

### ToolbarGroup Properties

| Property                                              | Type                                        | Description                                                                           |
| ----------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                                 | Child actions                                                                         |
| **`align`**                                           | [`Align`](/altrone-ui/utils/enums/align.md) | Alignment of actions                                                                  |
| **`fluid`**                                           | `boolean`                                   | Group takes all available space (works like flex-grow: 1)                             |
| **`collapsible`**                                     | `boolean`                                   | If group hasn't got enough space then the remaining actions will be moved to dropdown |

## Toolbar Actions

ToolbarAction is a component thats represents a button on the toolbar. It has a mandatory icon and optional label props. Also toolbar action have three different types of behaviour:

**Button.** When you pass `onClick` prop the action is working as a button. Just click on it and action happens. Examples of the actions with this behaviour: "Undo" action, "Flip vertical" action or "Save" action.&#x20;

**ContextMenu.** When you pass `contextMenu` prop the action is working as a button with dropdown. When user hits the button he see the list of actions. Examples of the actions: "Recent documents", "Send to" and "More tools". This property is available only in **Altrone 1.3** and later.&#x20;

**FloatingBox.** When you pass `content` prop the action is working as a button which opens a FloatingBox. When user hits the button he see the FloatingBox with content. Examples of the actions: "Share", "Formatting", "People". The property is a function with arguments that are represented in the [ToolbarPopupActionProps](#toolbarpopupactionprops) type. This property is available only in **Altrone 1.3** and later.&#x20;

**Custom action.** In **Altrone 2.2**, you can create actions with different content. For example, you can use \<Select> or \<DatePicker> instead of an usual icon. Use `children` prop to activate this mode. You may also need `hideLabel`, `fluid` and `usePressEffect` props to properly configure the behavior and display of the action.

All of these behaviors are useful in different ways. Use buttons for simple actions, content menus for multiple options, and floating boxes for more complex interfaces and panels. And custom actions allow you to create more complex toolbar actions. &#x20;

### <mark style="color:blue;">ToolbarPopupActionProps</mark>

```typescript
interface ToolbarPopupActionProps {
  closePopup: () => void;
}
```

### ToolbarAction Properties

| Property                                                                                               | Type                                                                              | Description                                                                                  |
| ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| **`icon`**<mark style="color:red;">**`*`**</mark>                                                      | `JSX.Element`                                                                     | Icon of the action                                                                           |
| **`label`**                                                                                            | `string`                                                                          | Label of the action                                                                          |
| **`onClick`**                                                                                          | `() => void`                                                                      | Callback is fired when user clicked on the action                                            |
| **`contextMenu`**                                                                                      | `ContextMenuType`                                                                 | Context Menu of the action                                                                   |
| **`content`**                                                                                          | `(props:` [`ToolbarPopupActionProps`](#toolbarpopupactionprops)`) => JSX.Element` | FloatingBox content for the action                                                           |
| **`active`**                                                                                           | `boolean`                                                                         | Marks action as active                                                                       |
| **`disabled`**                                                                                         | `boolean`                                                                         | Marks action as disabled                                                                     |
| **`danger`**                                                                                           | `boolean`                                                                         | Marks action as danger                                                                       |
| **`indicator`**                                                                                        | `Indicator`                                                                       | Adds indicator to the action                                                                 |
| **`hideLabel`**&#x20;**&#x20;**<mark style="color:purple;background-color:purple;">**new**</mark>      | `boolean`                                                                         | Hides the label of the action. Default value is `false`. Available since 2.2                 |
| **`children`**&#x20;**&#x20;**<mark style="color:purple;background-color:purple;">**new**</mark>       | `JSX.Element`                                                                     | Custom children of the action. Default value is `undefined`. Available since 2.2             |
| **`fluid`**&#x20;**&#x20;**<mark style="color:purple;background-color:purple;">**new**</mark>          | `boolean`                                                                         | If true, the action takes all available space. Default value is `false`. Available since 2.2 |
| **`usePressEffect`**&#x20;**&#x20;**<mark style="color:purple;background-color:purple;">**new**</mark> | `boolean`                                                                         | If true, the action has animation on press. Default value is `true`. Available since 2.2     |
| **`className`**                                                                                        | `string`                                                                          | Custom CSS class                                                                             |

## Toolbar Menu

In some cases your application has so many actions and it is not possible to fit all of them on the toolbar. For default toolbars it is possible to add menu. Menu is a list of text buttons on the top side of the toolbar. It is working like application's menu bar in Windows applications or macOS App menus.&#x20;

You can store all your actions in the menu which is separated by different groups. Check ToolbarMenu type to see how it works:

### <mark style="color:blue;">ToolbarMenu</mark>

{% hint style="warning" %}
This type is available for importing only in **Altrone 2.0** and later. For Altrone 1.0 you can use `{ label: string; submenu?: ContextMenuType }[];`
{% endhint %}

```typescript
type ToolbarMenu = {
    label: string;
    submenu?: ContextMenuType
}[];
```

## Properties

| Property                                              | Type                                                | Description                                                        |
| ----------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------ |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                                         | Child group containers and actions                                 |
| **`variant`**                                         | [`ToolbarVariant`](#toolbarvariant)                 | Variant of the toolbar. Default value is `default`                 |
| **`floated`**                                         | `boolean`                                           | Makes position of the toolbar as fixed.                            |
| **`menu`**                                            | [`ToolbarMenu`](#toolbarmenu)                       | Adds the menu to the toolbar. Only available for `default` variant |
| **`offset`**                                          | [`Point`](/altrone-ui/utils/types/point.md)         | Default offset (from window boundaries) for `floated` toolbars     |
| **`width`**                                           | `number \| string`                                  | Width of the toolbar                                               |
| **`surface`**                                         | [`Surface`](/altrone-ui/utils/enums/surface.md)     | Surface of the toolbar                                             |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of the toolbar                                             |
| **`defaultPosition`**                                 | [`Point`](/altrone-ui/utils/types/point.md)         | Default position for toolbar (for `floated` toolbars)              |
| **`className`**                                       | `string`                                            | Custom CSS class                                                   |

## History

* **`Altrone 2.2`**:
  * added `hideLabel` prop for ToolbarAction
  * added `children` prop for ToolbarAction
  * added `fluid` prop for ToolbarAction
  * added `usePressEffect` prop for ToolbarAction
* **`Altrone 2.0`**:
  * added `surface` prop
  * added `elevation` prop
  * added `variant` prop
  * added `defaultPosition` prop
  * added export of `ToolbarMenu` type
* **`Altrone 1.3`**:&#x20;
  * added `contextMenu` prop for ToolbarAction
  * added `content` prop for ToolbarAction
  * `onClick` prop for `ToolbarAction` became as optional
* **`Altrone 1.1`**: added `indicator` prop for `ToolbarAction`
* **`Altrone 1.0`**: initial release