ActionContainer

@component-controls/components

3.4.5

Container box with actions.

Component

browse

docs

issues

import { ActionContainer } from '@component-controls/components';

Overview

() => {
  return (
    <Box style={{ width: '100%' }}>
      <ActionContainer
        actions={[
          {
            node: 'action 1',
            onClick: () => console.log('clicked'),
          },
          {
            node: <ExternalLink href="https://google.com">google</ExternalLink>,
            onClick: () => console.log('clicked'),
          },
        ]}
      >
        <Donut value={1 / 2} />
      </ActionContainer>
    </Box>
  );
}

Properties

Name	Description	Default
actions	optional actions provided to the component ActionItem[]	-
plain	if plain, skip the border and spacing around the children boolean	-

External dependencies

package	imports	peer
react ^17.0.1	FC	*
theme-ui ^0.6.0-alpha.7	jsxBox

Internal dependencies

file	imports
"../ActionBar"	ActionBarActionItem

Component JSX

from"../ActionBar"

^0.6.0-alpha.7

Stories

Order

() => (
  <ActionContainer
    actions={[
      {
        node: 'action 1',
        onClick: () => console.log('clicked'),
        order: 1,
      },
      {
        node: <ExternalLink href="https://google.com">google</ExternalLink>,
        onClick: () => console.log('clicked'),
        order: 0,
      },
    ]}
  >
    <Donut value={1 / 2} />
  </ActionContainer>
)

Override

() => (
  <ActionContainer
    actions={[
      {
        node: 'action 1',
        onClick: () => console.log('clicked'),
        id: 'copy',
      },
      {
        node: <ExternalLink href="https://google.com">google</ExternalLink>,
        onClick: () => console.log('clicked'),
      },
      {
        //this will override the action above
        node: 'Copy',
        id: 'copy',
      },
    ]}
  >
    <Donut value={1 / 2} />
  </ActionContainer>
)

component-controls/ActionBar

component-controls/BlockContainer

Docs

ActionContainer

Component

Overview

Properties

External dependencies

Internal dependencies

Component JSX

Stories

Order

Override