Button

1  import { ArchiveBoxIcon, BookmarkIcon, Cog6ToothIcon } from '@heroicons/react/24/solid'
2  import { Button, Para, Separator } from '@jobilla/starfield'
3  
4  export function BasicDemo() {
5      return (
6          <div className="grid gap-2">
7              <div>
8                  <Button type="primary">Click me!</Button>
9              </div>
10              <div>
11                  <Button type="primary" icon={<Cog6ToothIcon className="w-4" />}>Click me!</Button>
12              </div>
13              <div>
14                  <Button type="secondary" icon={<ArchiveBoxIcon className="w-4" />}>Interact</Button>
15              </div>
16              <div>
17                  <Button type="tertiary" icon={<BookmarkIcon className="w-4" />}>Learn more about me</Button>
18              </div>
19              <Separator />
20              <Para>
21                  Use the size property to adjust blocky height:
22              </Para>
23              <div>
24                  <Button type="primary" size="tall">Click me</Button>
25              </div>
26              <div>
27                  <Button type="primary" size="medium">Click me!</Button>
28              </div>
29              <div>
30                  <Button type="primary" size="short">Click me!</Button>
31              </div>
32              <Separator />
33              <Para>
34                  Use the scale property to adjust the font size:
35              </Para>
36              <div>
37                  <Button type="primary" scale="large">Click me</Button>
38              </div>
39              <div>
40                  <Button type="primary" scale="medium">Click me!</Button>
41              </div>
42              <div>
43                  <Button type="primary" scale="small">Click me!</Button>
44              </div>
45          </div>
46      )
47  }