ThemeEditorButton

The ThemeEditorButton renders a ready-made button that opens the ThemeEditorDrawer.

It should be used as a direct child of ThemeEditor component.

Import

Community Version

import { ThemeEditorButton } from '@hypertheme-editor/chakra-ui'

Pro Version PRO

import { ThemeEditorButton } from '@hypertheme-editor-pro/chakra-ui'

Usage

This component doesn't work on itself, it must be a direct child of the ThemeEditor component.

Simple Usage

Here's an example of a theme editor with a standard ThemeEditorButton:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer />
    </ThemeEditor>
  )
}

ButtonProps Customization

ThemeEditorButton accepts all props from Chakra UI ButtonProps, this example demonstrate how the customization can be done:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton
        size="lg"
        h="auto"
        variant="link"
        borderWidth={1}
        borderColor="transparent"
        _hover={{
          borderColor: useColorModeValue('primary.500', 'gray.200'),
          transform: 'translateY(-2px)',
        }}
        {...props}
      />
      <ThemeEditorDrawer />
    </ThemeEditor>
  )
}

Props

This component accepts also ButtonProps from the Chakra UI Button component, read more here.

onOpen

The onClose prop is called when clicking on the "close drawer" button.

This prop is overrided by the ThemeEditorDrawer component, so you don't have to mind it.

label

An optional label to show.

Here's an example:

<ThemeEditorButton label="My Label" />

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting