Layout Component

index

6

status

Draft

The Layout component provides flexbox-based layout capabilities that are zoom-aware and work within the Blueprint layer system.

Basic Usage

<Layout gap="1rem" align="center">
  <Element>...</Element>
  <Element>...</Element>
</Layout>

Props

• gap – Space between child elements
• align – Flex alignment (“start”, “center”, “end”, “stretch”)

Layout components automatically scale their gap with zoom level and maintain 3D transform context for explosion effects.

Example: Button with Icon

<Content elevation={2}>
  <Layout gap="0.5rem" align="center">
    <Element width="1rem" height="1rem">
      <Fill color="currentColor" />
    </Element>
    <Element>
      <Content>Button Text</Content>
    </Element>
  </Layout>
</Content>