Button

1
Button do
2
  "Button"
3
end

1
Button do
2
  "Button"
3
end
4
5
Button :neutral do
6
  "Neutral"
7
end
8
9
Button :primary do
10
  "Primary"
11
end
12
13
Button :secondary do
14
  "Secondary"
15
end
16
17
Button :accent do
18
  "Accent"
19
end
20
21
Button :ghost do
22
  "Ghost"
23
end
24
25
Button :link do
26
  "Link"
27
end

1
Button :active do
2
  "Button"
3
end
4
5
Button :active, :neutral do
6
  "Neutral"
7
end
8
9
Button :active, :primary do
10
  "Primary"
11
end
12
13
Button :active, :secondary do
14
  "Secondary"
15
end
16
17
Button :active, :accent do
18
  "Accent"
19
end
20
21
Button :active, :ghost do
22
  "Ghost"
23
end
24
25
Button :active, :link do
26
  "Link"
27
end

1
Button :info do
2
  "Info"
3
end
4
5
Button :success do
6
  "Success"
7
end
8
9
Button :warning do
10
  "Warning"
11
end
12
13
Button :error do
14
  "Error"
15
end

1
Button :outline do
2
  "Default"
3
end
4
5
Button :outline, :primary do
6
  "Primary"
7
end
8
9
Button :outline, :secondary do
10
  "Secondary"
11
end
12
13
Button :outline, :accent do
14
  "Accent"
15
end

1
Button :outline, :info do
2
  "Info"
3
end
4
5
Button :outline, :success do
6
  "Success"
7
end
8
9
Button :outline, :warning do
10
  "Warning"
11
end
12
13
Button :outline, :error do
14
  "Error"
15
end

1
Button :lg do
2
  "Large"
3
end
4
5
Button do
6
  "Normal"
7
end
8
9
Button :sm do
10
  "Small"
11
end
12
13
Button :xs do
14
  "Tiny"
15
end

1
Button :xs, responsive: {sm: :sm, md: :md, lg: :lg} do
2
  "Responsive"
3
end

1
Button :wide do
2
  "Wide"
3
end

1
Button :glass do
2
  "Glass button"
3
end

1
Button as: :a, role: :button do
2
  "Link"
3
end
4
5
Button type: :submit do
6
  "Button"
7
end
8
9
Button as: :input, type: :button, value: "Input"
10
Button as: :input, type: :submit, value: "Submit"
11
Button as: :input, type: :radio, aria_label: "Radio"
12
Button as: :input, type: :checkbox, aria_label: "Checkbox"
13
Button as: :input, type: :reset, value: "Reset"

1
Button disabled: true do
2
  "Disabled using attribute"
3
end
4
5
Button :disabled, tabindex: -1, role: :button, aria_disabled: true do
6
  "Disabled using class name"
7
end

1
Button :square do
2
  x_svg
3
end
4
5
Button :square, :outline do
6
  x_svg
7
end

1
Button :circle do
2
  x_svg
3
end
4
5
Button :circle, :outline do
6
  x_svg
7
end

1
Button do
2
  heart_svg
3
  plain "Button"
4
end

1
Button do
2
  plain "Button"
3
  heart_svg
4
end

1
Button :block do
2
  "block"
3
end

1
Button :square do
2
  Loading :spinner
3
end

1
Button do
2
  Loading :spinner
3
  plain "loading"
4
end

1
Button :no_animation do
2
  "I don't have click animation"
3
end