Button

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemo() {
6    return <Button>Button</Button>
7}
8

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoPrimary() {
6    return (
7        <div>
8            <Button variant="primary">Primary</Button>
9        </div>
10    )
11}
12

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoSecondary() {
6    return (
7        <div>
8            <Button variant="secondary">Secondary</Button>
9        </div>
10    )
11}
12

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoOutline() {
6    return (
7        <div>
8            <Button variant="outline">Outline</Button>
9        </div>
10    )
11}
12

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoDanger() {
6    return (
7        <div>
8            <Button variant="error">Error</Button>
9        </div>
10    )
11}
12

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoSuccess() {
6    return (
7        <div>
8            <Button variant="success">Success</Button>
9        </div>
10    )
11}
12

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoGhost() {
6    return (
7        <div>
8            <Button variant="ghost">
9                Ghost
10            </Button>
11        </div>
12    )
13}
14

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemoSize() {
6    return (
7        <div className="flex flex-col gap-2.5">
8            <div className="flex items-center gap-3">
9                <Button variant="primary" size="lg">
10                    Large
11                </Button>
12                <Button variant="primary" size="default">
13                    default
14                </Button>
15                <Button variant="primary" size="sm">
16                    Small
17                </Button>
18            </div>
19            <div className="flex items-center gap-3">
20                <Button variant="secondary" size="lg">
21                    Large
22                </Button>
23                <Button variant="secondary" size="default">
24                    default
25                </Button>
26                <Button variant="secondary" size="sm">
27                    Small
28                </Button>
29            </div>
30            <div className="flex items-center gap-3">
31                <Button variant="outline" size="lg">
32                    Large
33                </Button>
34                <Button variant="outline" size="default">
35                    default
36                </Button>
37                <Button variant="outline" size="sm">
38                    Small
39                </Button>
40            </div>
41            <div className="flex items-center gap-3">
42                <Button variant="error" size="lg">
43                    Large
44                </Button>
45                <Button variant="error" size="default">
46                    default
47                </Button>
48                <Button variant="error" size="sm">
49                    Small
50                </Button>
51            </div>
52            <div className="flex items-center gap-3">
53                <Button variant="success" size="lg">
54                    Large
55                </Button>
56                <Button variant="success" size="default">
57                    default
58                </Button>
59                <Button variant="success" size="sm">
60                    Small
61                </Button>
62            </div>
63            <div className="flex items-center gap-3">
64                <Button variant="ghost" size="lg">
65                    Large
66                </Button>
67                <Button variant="ghost" size="default">
68                    default
69                </Button>
70                <Button variant="ghost" size="sm">
71                    Small
72                </Button>
73            </div>
74        </div>
75    )
76}
77

1import React from 'react'
2import { ChevronRight, MousePointerClick } from 'lucide-react'
3
4import { Button } from '@/components/ui/button'
5
6export function ButtonDemoWithIcon() {
7    return (
8        <div className="flex flex-col items-center gap-2.5">
9            <Button size="icon">
10                <ChevronRight />
11            </Button>
12            <Button>
13                Click me
14                <MousePointerClick />
15            </Button>
16        </div>
17    )
18}
19

1import React from 'react'
2import Link from 'next/link'
3
4import { Button } from '@/components/ui/button'
5
6export function ButtonLink() {
7    return (
8        <div>
9            <Button variant="link" asChild>
10                <Link href="#">Link</Link>
11            </Button>
12        </div>
13    )
14}
15

1'use client'
2import { useState } from 'react'
3
4import { Button } from '@/components/ui/button'
5
6export function ButtonLoader() {
7    const [isLoading, setIsLoading] = useState(false)
8
9    const handleClick = () => {
10        setIsLoading(true)
11
12        setTimeout(() => {
13            setIsLoading(false)
14        }, 2000)
15    }
16
17    return (
18        <div className="flex flex-col gap-4">
19            <Button onClick={handleClick} loading={isLoading}>
20                {isLoading ? 'Submitting...' : 'Submit'}
21            </Button>
22
23            {/* Loading state  */}
24            <Button loading>Submitting...</Button>
25        </div>
26    )
27}
28