Skip to main content
components

Expand

A button that expands into a floating content area.

Package@g4rcez/componentsSectionFloating Elements

Examples

Simple Expand with Popover Content

Demonstrates a button that expands to reveal additional information or components within a popover-style container.

Simple with popover
tsx
"use client";
import { QuestionIcon } from "@phosphor-icons/react";
import { Card, Expand, Tag } from "@g4rcez/components";

function SimpleExpandDemo() {
  return (
    <Card title="Simple with popover">
      <Expand
        theme="raw"
        trigger={
          <span className="flex gap-2 items-center">
            Need help <QuestionIcon size={14} />
          </span>
        }
      >
        <div className="flex-col shadow-lg border border-card-border gap-4 w-[200px] rounded-lg bg-card-background p-8 flex items-center justify-center">
          Cras mattis iudicium purus sit amet fermentum. Curabitur blandit
          tempus ardua ridiculus sed magna.
          <Tag>Tags</Tag>
          <Tag indicator="success" theme="neutral">
            Tags
          </Tag>
        </div>
      </Expand>
    </Card>
  );
}

When to use Expand

Use when

You need the documented Expand interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Expand behavior you need.

Accessibility

Keep the Expand labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.