Box

Primitive wrapper paling dasar untuk styling/layout ringan dengan dukungan polymorphic `as`.

import { Box } from "@naraya/ui";

Box adalah building block minimal. Pakai saat butuh wrapper semantic tambahan tanpa behavior layout khusus.

Default

Basic box

<Box>Basic box</Box>

Polymorphic as

Header region

Main content

<Box as="header">Header region</Box>
<Box as="main">Main content</Box>

Utility wrapper

Info

Success

<Box style={{ padding: "0.5rem 0.75rem" }}>
  <Badge tone="info">Info</Badge>
</Box>

Prop	Type	Default	Description
as	`ElementType`	`"div"`	Render sebagai tag/komponen lain.
children	`ReactNode`	—	Isi konten Box.
...rest	`HTMLAttributes<HTMLElement>`	—	Props native element (className, style, id, dsb).

--border-subtle

Contoh border box wrapper

--bg-surface

Contoh background box container