ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
      • Text
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Upper Toolbar

yarn add @clayui/upper-toolbar

Upper toolbar is a guidance pattern to allow designers create their own toolbars for edition with preview pages.

Deprecated3.58.0View in LexiconCHANGELOGstorybook demos

  • Introduction
  • Example
  • API
WarningThis component has been discontinued in favor of ClayToolbar, you can get the same result.

Introduction

The Upper Toolbar components can be composed together to make all sorts of toolbar variations. Combine Upper Toolbar with other Clay components to cover a variety of use cases.

Example

Copied!
Code Sample (expand to see it)

API

UpperToolbar

Extends from React.HTMLAttributes<HTMLElement>

UpperToolbar.Item

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

UpperToolbar.Input

Extends from React.ComponentProps<typeof ClayInput>

How can this be improved? Create an issue!