Box

Standard surface container for cards, panels, and linked boxes.

Demo

Default box

Box provides the standard surface, border, radius, and clipping.

Usage

import { Box } from 'regen-ui'

export function ActionCard() {
  return (
    <>
      <Box className="text-left" onClick={() => console.log('clicked')}>
        Open
      </Box>
      <Box className="text-left" disabled onClick={() => console.log('clicked')}>
        Disabled
      </Box>
    </>
  )
}

API Reference

Box.Props

disabledOptional
Typeboolean
DefaultNone
Disable interaction when Box renders as an interactive element.
paddingOptional
Typenumber
Default16
Padding in px.
renderOptional
TypeReactElement
DefaultNone
Element to render as instead of `<div>` or `<button>`.
Inherits HTMLAttributes<HTMLElement>.