Toolbar

A toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.

install	yarn add @clayui/toolbar
version
use	`import TimePicker from '@clayui/toolbar';`

Table of Contents

Introduction
Composing
API Reference

Introduction

A toolbar organizes actions into a horizontal bar that is responsive. Its height changes to accommodate the height of the elements it contains. The toolbar always maintains the vertical alignment.

Open Sandbox

import {Provider} from '@clayui/core';
import Toolbar from '@clayui/toolbar';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Toolbar>
					<Toolbar.Nav>
						<Toolbar.Item>
							<Toolbar.Action
								aria-label="Previous"
								disabled
								href="#"
								symbol="angle-left"
								title="Previous"
							/>
						</Toolbar.Item>

						<Toolbar.Item expand>
							<Toolbar.Section>
								<span className="text-truncate-inline">
									<span className="text-truncate">
										{
											'Item 1 of 3,138,732,873,467,182,321,341,231,234,342,559,827,334,424'
										}
									</span>
								</span>
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Link href="#">
								{'Component Link'}
							</Toolbar.Link>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Action
								aria-label="Next"
								title="Next"
								disabled
								href="#"
								symbol="angle-right"
							/>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Action
								aria-label="Close"
								title="Close"
								disabled
								href="#"
								symbol="times"
							/>
						</Toolbar.Item>
					</Toolbar.Nav>
				</Toolbar>
			</div>
		</Provider>
	);
}

Composing

Toolbar.Nav is the highest level wrapper to be used inside the Toolbar to wrap all the content inside.

Toolbar.Item represents a Toolbar child item, a list item that is supposed to wrap around any of the other low-level components.

Toolbar.Section is a wrapper to be used inside the Toolbar.Item that makes the contents it wraps display inline.

Toolbar.Action is used when you want a clickable icon to add an action in the Toolbar.

Toolbar.Input, Toolbar.Label and Toolbar.Link are essentially a wrapper around their respective Clay components with some specifics related to Toolbar.

Open Sandbox

import {Provider} from '@clayui/core';
import Toolbar from '@clayui/toolbar';
import {ClayInput} from '@clayui/form';
import Icon from '@clayui/icon';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import Button, {ClayButtonWithIcon} from '@clayui/button';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Toolbar>
					<Toolbar.Nav>
						<Toolbar.Item className="text-left" expand>
							<Toolbar.Section>
								<label className="component-title">
									{'Foo Bar'}
								</label>

								<Icon symbol="lock" />
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<ClayInput.Group>
								<ClayInput.GroupItem>
									<ClayInput
										className="form-control-inline"
										placeholder="Search..."
									/>
								</ClayInput.GroupItem>
							</ClayInput.Group>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Section>
								<Button.Group>
									<ClayButtonWithIcon
										aria-label="Previous"
										title="Previous"
										displayType="secondary"
										onClick={() => {}}
										small
										symbol="angle-left"
									/>

									<ClayButtonWithIcon
										aria-label="Next"
										title="Next"
										displayType="secondary"
										onClick={() => {}}
										small
										symbol="angle-right"
									/>
								</Button.Group>
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Section>
								<Button
									displayType="secondary"
									onClick={() => {}}
								>
									{'Delete'}
								</Button>

								<Button
									className="inline-item-after"
									onClick={() => {}}
								>
									{'Edit'}
								</Button>
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<ClayDropDownWithItems
								items={[
									{href: '#one', label: 'one'},
									{href: '#two', label: 'two'},
									{
										disabled: true,
										href: '#three',
										label: 'three',
									},
									{href: '#four', label: 'four'},
								]}
								trigger={
									<ClayButtonWithIcon
										aria-label="More Actions"
										title="More Actions"
										displayType="unstyled"
										small
										symbol="ellipsis-v"
									/>
								}
							/>
						</Toolbar.Item>
					</Toolbar.Nav>
				</Toolbar>
			</div>
		</Provider>
	);
}

API Reference

typeof Toolbar

Parameters

Properties

inlineBreakpoint

"xs" | "sm" | "md" | "lg" | "xl" | undefined

Adds a helper class that turns the Toolbar inline at a specified breakpoint.

light

boolean | undefined

Determines if the tbar-light class should be added to the Toolbar, making it's background white.

subnav

boolean | { disabled?: boolean; displayType?: "light" | "primary"; } | undefined

Defines if the toolbar should have the subnav-tbar class.

Returns

Element

Action

{ ({ className, disabled, spritemap, symbol, ...otherProps }: IProps): JSX.Element; displayName: string; }

Parameters

Properties

disabled

boolean | undefined

Flag that determines if the Action will have a disabled class, disabling interactions.

spritemap

string | undefined

Path to clay icon spritemap

symbol *

string

Symbol of the icon used inside the Action. You can find available symbols here: https://clayui.com/docs/components/icon.html

Returns

Element

Input

{ ({ className, ...otherProps }: IProps): JSX.Element; displayName: string; }

Returns

Element

Item

{ ({ children, className, expand, ...otherProps }: IProps): JSX.Element; displayName: string; }

Parameters

Properties

expand

boolean | undefined

Flag to indicate if Item should auto expand to fill the remaining width.

Returns

Element

Label

{ ({ children, className, ...otherProps }: IProps): JSX.Element; displayName: string; }

Returns

Element

Link

{ ({ children, className, disabled, ...otherProps }: IProps): JSX.Element; displayName: string; }

Parameters

Properties

disabled

boolean | undefined

Flag that determines if the Link will have a disabled class, disabling interactions.

Returns

Element

Nav

{ ({ children, className, wrap, ...otherProps }: IProps): JSX.Element; displayName: string; }

Parameters

Properties

wrap

boolean | undefined

Specifies whether the tbar-nav-wrap class should be added to the Toolbar.Nav

Returns

Element

Section

{ ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>): JSX.Element; displayName: string; }

Returns

Element

Edit this page on GitHub

Contributors

Table of Contents

Introduction
Composing
API Reference