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

Use the outline button styles to create bordered buttons with transparent backgrounds. Styled with Flowbite 4.0 semantic design tokens.

No params configured.