Data Display
Avatar, Badge, Tag, and Tooltip components for presenting data and status information
Avatars
Display user profile images, initials, and status indicators
With Image
With Initials
JD
AS
BW
CM
DL
EB
FT
GK
Sizes
JD
xs
JD
sm
JD
md
JD
lg
JD
xl
Shapes
JD
circle
JD
square
JD
rounded
circle
square
rounded
Status Indicators
U
online
U
offline
U
busy
U
away
online
offline
busy
away
# Avatar with image
bui_avatar(src: "https://i.pravatar.cc/150?img=1", alt: "User", size: :lg)
# Avatar with initials
bui_avatar(name: "John Doe", variant: :primary, size: :md)
# Avatar with shape
bui_avatar(name: "Alice", variant: :accent, size: :lg, shape: :rounded)
# Avatar with status indicator
bui_avatar(name: "Bob", variant: :success, size: :lg, status: :online)Badges
Small status indicators, counters, and labels
Variants
Primary
Secondary
Accent
Success
Danger
Warning
Info
Light
Dark
Styles
solid
Primary
Success
Danger
Warning
Info
outline
Primary
Success
Danger
Warning
Info
soft
Primary
Success
Danger
Warning
Info
ghost
Primary
Success
Danger
Warning
Info
Sizes
Size xs
Size sm
Size md
Size lg
Pill vs Square
Pill (default)
Square corners
Pill badge
Square badge
Dot Indicator
Counter Mode
3
12
99
0
# Basic badge
bui_badge(variant: :success) { "Active" }
# Badge with style
bui_badge(variant: :danger, style: :outline) { "Error" }
# Dot indicator
bui_badge(variant: :info, dot: true) { "New" }
# Counter mode
bui_badge(variant: :danger, counter: 5)
# Non-pill badge
bui_badge(variant: :primary, pill: false) { "Square" }Tags
Categorization labels with optional dismiss and link behavior
Variants
Primary
Secondary
Accent
Success
Danger
Warning
Info
Light
Dark
Styles
solid
primary solid
success solid
danger solid
accent solid
info solid
outline
primary outline
success outline
danger outline
accent outline
info outline
soft
primary soft
success soft
danger soft
accent soft
info soft
Sizes
Size xs
Size sm
Size md
Size lg
Dismissible
Ruby
Active
Remove me
Closeable
Outline + dismiss
Tag as Link
# Basic tag
bui_tag(variant: :primary) { "Ruby" }
# Tag with style
bui_tag(variant: :success, style: :outline) { "Active" }
# Dismissible tag (with Stimulus controller)
bui_tag(variant: :danger, dismissible: true) { "Remove me" }
# Tag as link
bui_tag(variant: :accent, href: "/categories/ruby") { "Ruby" }Tooltips
Hover/focus tooltips with fixed positioning (overflow-safe). See the dedicated Tooltips page for more demos.
Positions
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Variants
Dark tooltip (default)
Light tooltip with border
Wrapping Different Elements
This is a button with a tooltip
Hover over this badge for info
Hover this text
This is a text tooltip
JD
Avatar tooltip
Sizes
Small tooltip text
Medium tooltip text
# Basic tooltip wrapping a button
bui_tooltip("Save changes", position: :top) do
bui_button(variant: :primary, size: :sm) { "Hover me" }
end
# Light variant tooltip
bui_tooltip("Light tooltip", position: :bottom, variant: :light) do
bui_button(variant: :light, size: :sm) { "Light" }
end
# Tooltip wrapping text
bui_tooltip("More info here", position: :right) do
content_tag(:span, "Hover this text", class: "underline cursor-help")
end