Tag

The tag is used to enhance components or jsx elements with admin-ui styles. Before proceeding, make sure that you understand the csx concept.

Jsx elements

The most common use-case is the jsx elements:

<tag.div
  csx={{
    bg: 'muted',
    color: 'base',
    border: 'default',
    borderRadius: 'default',
    padding: 4,
  }}
>
  admin-ui-powered div
</tag.div>

Function

You can also use tag as a function for elements or components:

const Section = tag('section') // jsx tags are allowed
const Button = tag(ReakitButton) // also components

function Example() {
  return (
    <Section csx={{ padding: 4, ...palette('purple') }}>
      admin-ui-powered section
      <Button
        csx={{
          padding: 2,
          cursor: 'pointer',
          bg: 'action.main.text',
          color: 'action.main.text',
          ':hover': {
            bg: 'action.main.textHover',
            color: 'action.main.textHover',
          },
          ':active': {
            bg: 'action.main.textPressed',
            color: 'action.main.textPressed',
          },
        }}
      >
        Button
      </Button>
    </Section>
  )
}

render(<Example />)

Polymorphism

A tag jsx element can be rendered as any HTML tag or component. To use this variation, add a valid component type to the as property.

function Example() {
  const menu = useReakitMenuState()

  return (
    <>
      <tag.button
        as={ReakitMenuButton}
        {...menu}
        csx={{
          height: 32,
          borderRadius: 4,
          padding: 2,
          cursor: 'pointer',
          bg: 'action.main.text',
          color: 'action.main.text',
          ':hover': {
            bg: 'action.main.textHover',
            color: 'action.main.textHover',
          },
          ':active': {
            bg: 'action.main.textPressed',
            color: 'action.main.textPressed',
          },
        }}
      >
        Preferences
      </tag.button>
      <tag.div
        as={ReakitMenu}
        {...menu}
        aria-label="Preferences"
        csx={{
          border: '1px solid',
          borderColor: 'popover',
          display: 'flex',
          flexDirection: 'column',
          bg: 'popover',
          borderRadius: 4,
          '> button': {
            borderRadius: 4,
            margin: 1,
            height: 32,
            cursor: 'pointer',
            ...listBoxItem('main'),
            ...focusVisible('main'),
          },
        }}
      >
        <tag.button as={ReakitMenuItem} {...menu}>
          Settings
        </tag.button>
        <tag.button as={ReakitMenuItem} {...menu}>
          Extensions
        </tag.button>
        <tag.button as={ReakitMenuItem} {...menu}>
          Keyboard shortcuts
        </tag.button>
      </tag.div>
    </>
  )
}