x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Primary -->
<button class="inline-flex items-center border border-transparent rounded-md shadow-sm text-white hover:ring-2 hover:ring-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-magenta hover:bg-magenta hover:ring-magenta px-4 py-2 text-sm font-medium">Click Here</button>
<!-- Secondary -->
<button class="inline-flex items-center border border-transparent rounded-md shadow-sm text-white hover:ring-2 hover:ring-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-solar3 hover:bg-solar3 focus:ring-solar3 px-4 py-2 text-sm font-medium">Click Here</button>
<!-- Success -->
<button class="inline-flex items-center border border-transparent rounded-md shadow-sm text-white hover:ring-2 hover:ring-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-cyan hover:bg-cyan focus:ring-cyan px-4 py-2 text-sm font-medium">Click Here</button>
<!-- Warning -->
<button class="inline-flex items-center border border-transparent rounded-md shadow-sm text-white hover:ring-2 hover:ring-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-yellow hover:bg-yellow focus:ring-yellow px-4 py-2 text-sm font-medium">Click Here</button>
<!-- Danger -->
<button class="inline-flex items-center border border-transparent rounded-md shadow-sm text-white hover:ring-2 hover:ring-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red hover:bg-red focus:ring-red px-4 py-2 text-sm font-medium">Click Here</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Primary
render ButtonComponent.new(scheme: :primary) do
"Click Here"
end
# Secondary
render ButtonComponent.new(scheme: :secondary) do
"Click Here"
end
# Success
render ButtonComponent.new(scheme: :success) do
"Click Here"
end
# Warning
render ButtonComponent.new(scheme: :warning) do
"Click Here"
end
# Danger
render ButtonComponent.new(scheme: :danger) do
"Click Here"
end