skip to main content
skip to navigation sidebar
skip to context sidebar
Collection of theme-ui and external components.
Theme UI
Edit this page
created:3/15/2021
updated:3/15/2021
source lines:62
comments %:21

ActionBar

@component-controls/components
3.4.5

A strip of actions to be attached to a container. The action items contain the labels and click event handlers. Actions can accept an order prop, and can also overwrite default actions.

Component

browse
docs
issues
import { ActionBar } from '@component-controls/components';

Overview

google

browse
docs
issues
({ themeKey }) => (
  <Container>
    <ActionBar
      themeKey={themeKey}
      actions={[
        {
          node: 'action 1',
          onClick: () => console.log('clicked'),
        },
        {
          node: <ExternalLink href="https://google.com">google</ExternalLink>,
          onClick: () => console.log('clicked'),
        },
      ]}
    />
  </Container>
)

Properties

Name
Description
Default
Controls
actions

collection of action items

ActionItems
[]
themeKey

custom layouts from the theme, defaults to 'actionbar'

string
actionbar

External dependencies

package
imports
peer
react
^17.0.1
useMemoFC
*
theme-ui
^0.6.0-alpha.7
jsxButtonBox

Internal dependencies

file
imports
"./utils"
getSortedActionsActionItems
"../Link"
Link

Component JSX

<Link
varianthrefaria-label
/>
Link
from"../Link"
<Button
variantonClickaria-label
/>
theme-ui
^0.6.0-alpha.7
<Box
variant
/>
theme-ui
^0.6.0-alpha.7

Stories

browse
docs
issues
() => (
  <Container>
    <ActionBar
      actions={[
        {
          node: <ExternalLink href="https://google.com">google</ExternalLink>,
        },
      ]}
    />
  </Container>
)

Order

google

browse
docs
issues
() => (
  <Container>
    <ActionBar
      actions={[
        {
          node: 'action 1',
          onClick: () => console.log('clicked'),
          order: 1,
        },
        {
          node: <ExternalLink href="https://google.com">google</ExternalLink>,
          onClick: () => console.log('clicked'),
          order: 0,
        },
      ]}
    />
  </Container>
)

Override

google

browse
docs
issues
() => (
  <Container>
    <ActionBar
      actions={[
        {
          node: 'action 1',
          onClick: () => console.log('clicked'),
          id: 'copy',
        },
        {
          node: <ExternalLink href="https://google.com">google</ExternalLink>,
          onClick: () => console.log('clicked'),
        },
        {
          node: 'Copy',
          id: 'copy',
        },
      ]}
    />
  </Container>
)

Group End

browse
docs
issues
() => (
  <Container>
    <ActionBar
      actions={[
        {
          node: 'item 1',
        },
        {
          node: 'item 2',
          group: '1',
        },
        {
          node: 'item 3',
          group: '1',
        },
      ]}
    />
  </Container>
)

Group Start

browse
docs
issues
() => (
  <Container>
    <ActionBar
      actions={[
        {
          node: 'item 1',
          group: '1',
        },
        {
          node: 'item 2',
          group: '1',
        },
        {
          node: 'item 3',
        },
      ]}
    />
  </Container>
)
Previous
component-controls/Components usage
Next
component-controls/ActionContainer