Drawer

A panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

  • Name@spark-ui/drawer
    Version0.2.1
    LicenseMIT
    npmgithubReported IssuesReport a bug
    • UsageProps

    Install#

    npm install @spark-ui/button

    Import#

    import { Drawer } from "@spark-ui/drawer";

    Basic#

    <Drawer>
  <Drawer.Trigger asChild>
    <Button>Open</Button>
  </Drawer.Trigger>

  <Drawer.Portal>
    <Drawer.Overlay />

    <Drawer.Content>
      <Drawer.Header>
        <Drawer.Title>Title</Drawer.Title>
      </Drawer.Header>

      <Drawer.Body>
        <Drawer.Description>Description</Drawer.Description>
      </Drawer.Body>

      <Drawer.Footer className="flex justify-end gap-md">
        <Button intent="neutral" design="outlined">
          Cancel
        </Button>
        <Button>Submit</Button>
      </Drawer.Footer>

      <Drawer.CloseButton aria-label="Close edit profile" />
    </Drawer.Content>
  </Drawer.Portal>
</Drawer>;