Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Default -->
<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>
<!-- Secondary -->
<button class="focus:outline-none text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Secondary</button>
<!-- Tertiary -->
<button class="focus:outline-none text-body bg-neutral-primary-soft box-border border border-default hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary-soft shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Tertiary</button>
<!-- Success -->
<button class="focus:outline-none text-white bg-success box-border border border-transparent hover:bg-success-strong focus:ring-4 focus:ring-success-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Success</button>
<!-- Danger -->
<button class="focus:outline-none text-white bg-danger box-border border border-transparent hover:bg-danger-strong focus:ring-4 focus:ring-danger-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Danger</button>
<!-- Warning -->
<button class="focus:outline-none text-white bg-warning box-border border border-transparent hover:bg-warning-strong focus:ring-4 focus:ring-warning-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Warning</button>
<!-- Dark -->
<button class="focus:outline-none text-white bg-dark box-border border border-transparent hover:bg-dark-strong focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5">Dark</button>
<!-- Ghost -->
<button class="focus:outline-none text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base text-sm px-4 py-2.5">Ghost</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Default
render(Flowbite::Button.new) { "Default" }
# Secondary
render(Flowbite::Button.new(style: :secondary)) { "Secondary" }
# Tertiary
render(Flowbite::Button.new(style: :tertiary)) { "Tertiary" }
# Success
render(Flowbite::Button.new(style: :success)) { "Success" }
# Danger
render(Flowbite::Button.new(style: :danger)) { "Danger" }
# Warning
render(Flowbite::Button.new(style: :warning)) { "Warning" }
# Dark
render(Flowbite::Button.new(style: :dark)) { "Dark" }
# Ghost
render(Flowbite::Button.new(style: :ghost)) { "Ghost" }

Use these default button styles with multiple colors to indicate an action or link within your website.

No params configured.