Button

1
2
3
4
5

<Row>
  <Button onClick={()=>alert("hello")}>
    Trigger Alert
  </Button>
</Row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<Row>
  <Button>
    Update Role
  </Button>
  <Button variant="primary">
    Update Role
  </Button>
  <Button variant="destructive">
    Delete Role
  </Button>
  <Button variant="ghost">
    Filter
  </Button>
</Row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<Row>
  <Button>
    <Settings2 />
    Filter
  </Button>
  <Button variant="primary">
    {' '}
    <ArrowLeft />
    {' '}Update Role
    <ArrowRight />
  </Button>
  <Button variant="destructive">
    Update Role
    <Trash />
  </Button>
  <Button shape="square">
    <Settings2 />
  </Button>
</Row>

1
2
3
4
5

<Row>
  <Button shape="square">
    <Settings2 />
  </Button>
</Row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<Row>
  <Button
    keyboard={{
      callback: ()=>{alert("hello keyboard warrior")},
      display: 'X',
      trigger: e=>"x"===e.key
    }}
    variant="default"
  >
    Search
  </Button>
  <Button
    keyboard={{
      callback: ()=>{alert("hello keyboard warrior")},
      display: 'S',
      trigger: e=>"s"===e.key
    }}
    variant="primary"
  >
    Search
  </Button>
  <Button
    keyboard={{
      callback: ()=>{alert("hello keyboard warrior")},
      display: 'F',
      trigger: e=>"f"===e.key
    }}
    variant="ghost"
  >
    Search
  </Button>
  <Button
    keyboard={{
      callback: ()=>{alert("hello keyboard warrior")},
      display: 'T',
      trigger: e=>"t"===e.key
    }}
    variant="destructive"
  >
    Search
  </Button>
</Row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<Row>
  <Button loading>
    Update Role
  </Button>
  <Button
    onClick={()=>t(!0)}
    variant="primary"
  >
    Click Me
  </Button>
  <Button
    loading
    variant="destructive"
  >
    Update Role
  </Button>
  <Button
    loading
    variant="ghost"
  >
    Update Role
  </Button>
</Row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<Row>
  <Button disabled>
    Update Role
  </Button>
  <Button
    disabled
    variant="primary"
  >
    Update Role
  </Button>
  <Button
    disabled
    variant="destructive"
  >
    Update Role
  </Button>
  <Button
    disabled
    variant="ghost"
  >
    Update Role
  </Button>
</Row>