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:20
comments %:50

ActionContainer

@component-controls/components
3.4.5

Container box with actions.

Component

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

Order

google

browse
docs
issues
() => (
  <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>
)

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

<ActionBar
actions
/>
ActionBar
from"../ActionBar"
<Box
variant
/>
theme-ui
^0.6.0-alpha.7

Stories

Overview

google

browse
docs
issues
() => {
  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>
  );
}

Override

google

browse
docs
issues
() => (
  <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>
)
Previous
component-controls/ActionBar
Next
component-controls/BlockContainer