Buttons & feedback

Buttons, badges and keyboard hints

Preview

AlphaCtrl K

import { Button, Badge, Kbd, Alert, AlertTitle, AlertDescription, Progress, Skeleton, Spinner } from "nextguide/ui"

<div className="flex flex-wrap items-center gap-3">
  <Button>Save changes</Button>
  <Button variant="outline">Cancel</Button>
  <Button variant="ghost">More</Button>
  <Badge>Alpha</Badge>
  <Kbd>Ctrl K</Kbd>
</div>

Feedback alerts

Preview

Build succeeded

Your static pages are ready.

Alpha release

Account Mode is still in development.

import { Button, Badge, Kbd, Alert, AlertTitle, AlertDescription, Progress, Skeleton, Spinner } from "nextguide/ui"

<div className="grid gap-4">
  <Alert tone="success"><AlertTitle>Build succeeded</AlertTitle><AlertDescription>Your static pages are ready.</AlertDescription></Alert>
  <Alert tone="warning"><AlertTitle>Alpha release</AlertTitle><AlertDescription>Account Mode is still in development.</AlertDescription></Alert>
</div>

Progress and loading

Preview

import { Button, Badge, Kbd, Alert, AlertTitle, AlertDescription, Progress, Skeleton, Spinner } from "nextguide/ui"

<div className="grid gap-4">
  <Progress value={65} aria-label="Build progress" />
  <Skeleton style={{ height: 20, maxWidth: 240 }} />
  <Spinner />
</div>