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
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Default</button>
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Secondary</button>
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Tertiary</button>
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Success</button>
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Danger</button>
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Warning</button>
<!-- Pill 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-full text-center text-sm px-4 py-2.5">Dark</button>
<!-- Pill 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-full text-center 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
# Pill Default
render(Flowbite::Button::Pill.new(style: :default)) { "Default" }
# Pill Secondary
render(Flowbite::Button::Pill.new(style: :secondary)) { "Secondary" }
# Pill Tertiary
render(Flowbite::Button::Pill.new(style: :tertiary)) { "Tertiary" }
# Pill Success
render(Flowbite::Button::Pill.new(style: :success)) { "Success" }
# Pill Danger
render(Flowbite::Button::Pill.new(style: :danger)) { "Danger" }
# Pill Warning
render(Flowbite::Button::Pill.new(style: :warning)) { "Warning" }
# Pill Dark
render(Flowbite::Button::Pill.new(style: :dark)) { "Dark" }
# Pill Ghost
render(Flowbite::Button::Pill.new(style: :ghost)) { "Ghost" }

The button pills can be used as an alternative style by using fully rounded edges. Styled with Flowbite 4.0 semantic design tokens.

No params configured.