Badge

1
Badge do
2
  "Badge"
3
end

1
Badge do
2
  "default"
3
end
4
5
Badge :neutral do
6
  "neutral"
7
end
8
9
Badge :primary do
10
  "primary"
11
end
12
13
Badge :secondary do
14
  "secondary"
15
end
16
17
Badge :accent do
18
  "accent"
19
end
20
21
Badge :ghost do
22
  "ghost"
23
end

1
Badge :outline do
2
  "default"
3
end
4
5
Badge :primary, :outline do
6
  "primary"
7
end
8
9
Badge :secondary, :outline do
10
  "secondary"
11
end
12
13
Badge :accent, :outline do
14
  "accent"
15
end

1
Badge :lg do
2
  "987,654"
3
end
4
5
Badge :md do
6
  "987,654"
7
end
8
9
Badge :sm do
10
  "987,654"
11
end
12
13
Badge :xs do
14
  "987,654"
15
end

1
Badge :lg, :primary
2
Badge :md, :primary
3
Badge :sm, :primary
4
Badge :xs, :primary

1
Badge :info, class: "gap-2" do
2
  x_svg
3
  plain "info"
4
end
5
6
Badge :success, class: "gap-2" do
7
  x_svg
8
  plain "success"
9
end
10
11
Badge :warning, class: "gap-2" do
12
  x_svg
13
  plain "warning"
14
end
15
16
Badge :error, class: "gap-2" do
17
  x_svg
18
  plain "error"
19
end

1
h2 class: "text-xl" do
2
  plain "Heading"
3
  Badge :lg do
4
    "NEW"
5
  end
6
end
7
8
h3 class: "text-lg" do
9
  plain "Heading"
10
  Badge :md do
11
    "NEW"
12
  end
13
end
14
15
h4 class: "text-base" do
16
  plain "Heading"
17
  Badge :sm do
18
    "NEW"
19
  end
20
end
21
22
h5 class: "text-sm" do
23
  plain "Heading"
24
  Badge :xs do
25
    "NEW"
26
  end
27
end

1
Button do
2
  plain "Inbox"
3
  Badge do
4
    "+99"
5
  end
6
end
7
8
Button do
9
  plain "Inbox"
10
  Badge :secondary do
11
    "+99"
12
  end
13
end