Button

A clickable element for triggering actions or submitting forms.

1
---
2
import { ArrowUpIcon } from '@lucide/astro';
3

4
import { Button } from '@bejamas/ui/components/button';
5
---
6

7
<div class="flex flex-wrap items-center gap-2 md:flex-row">
8
  <Button>Button</Button>
9
  <Button variant="outline" size="icon" aria-label="Submit">
10
    <ArrowUpIcon />
11
  </Button>
12
</div>

Installation

bunx bejamas add button

npx bejamas add button

pnpm dlx bejamas add button

yarn dlx bejamas add button

Usage

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button>Click me</Button>

Link

You can use the as prop to render the component as an anchor.

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button as="a" href="https://bejamas.com">Click me</Button>

Examples

Variants

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<div class="flex flex-col items-start gap-8 sm:flex-row">
6
  <Button variant="default">Default</Button>
7
  <Button variant="secondary">Secondary</Button>
8
  <Button variant="outline">Outline</Button>
9
  <Button variant="ghost">Ghost</Button>
10
  <Button variant="destructive">Destructive</Button>
11
</div>

Sizes

1
---
2
import { ArrowUpRightIcon } from '@lucide/astro';
3

4
import { Button } from '@bejamas/ui/components/button';
5
---
6

7
<div class="flex flex-col items-start gap-8 sm:flex-row">
8
  <div class="flex items-start gap-2">
9
    <Button size="sm" variant="outline">
10
      Small
11
    </Button>
12
    <Button size="icon-sm" aria-label="Submit" variant="outline">
13
      <ArrowUpRightIcon />
14
    </Button>
15
  </div>
16
  <div class="flex items-start gap-2">
17
    <Button variant="outline">Default</Button>
18
    <Button size="icon" aria-label="Submit" variant="outline">
19
      <ArrowUpRightIcon />
20
    </Button>
21
  </div>
22
  <div class="flex items-start gap-2">
23
    <Button variant="outline" size="lg">
24
      Large
25
    </Button>
26
    <Button size="icon-lg" aria-label="Submit" variant="outline">
27
      <ArrowUpRightIcon />
28
    </Button>
29
  </div>
30
</div>

With badge

1
---
2
import { Badge } from '@bejamas/ui/components/badge';
3
import { Button } from '@bejamas/ui/components/button';
4
---
5

6
<Button variant="default">
7
  Click me
8
  <Badge variant="secondary">Value</Badge>
9
</Button>

Destructive

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button variant="destructive">Click me</Button>

Outline

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button variant="outline">Click me</Button>

Secondary

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button variant="secondary">Click me</Button>

Ghost

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button variant="ghost">Click me</Button>

Link

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button variant="link">Click me</Button>

Default

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
---
4

5
<Button>Click me</Button>