Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Xs Button -->
<button class="focus:outline-none text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5">Extra small</button>
<!-- Sm Button -->
<button class="focus:outline-none text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2">Small</button>
<!-- Default Button -->
<button class="focus:outline-none text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Default</button>
<!-- Lg Button -->
<button class="focus:outline-none text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-base px-5 py-3">Large</button>
<!-- Xl Button -->
<button class="focus:outline-none text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-base px-6 py-3.5">Extra large</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Xs Button
render(Flowbite::Button.new(size: :xs)) { "Extra small" }
# Sm Button
render(Flowbite::Button.new(size: :sm)) { "Small" }
# Default Button
render(Flowbite::Button.new(size: :default)) { "Default" }
# Lg Button
render(Flowbite::Button.new(size: :lg)) { "Large" }
# Xl Button
render(Flowbite::Button.new(size: :xl)) { "Extra large" }

Use these examples if you want to use smaller or larger buttons.

No params configured.