Skip to main content
Iced provides a rich collection of widgets for building graphical user interfaces. All widgets follow a consistent builder pattern and are designed to be composable, type-safe, and easy to use.

​
Core Concepts

​
Builder Pattern

All widgets in Iced use a builder pattern for configuration: 
button("Click me")
    .on_press(Message::ButtonPressed)
    .padding(10)
    .width(Length::Fill)

​
The Element Type

Widgets are converted into Element<Message> to be used in your view: 
fn view(&self) -> Element<Message> {
    button("Hello").into()
}

​
Widget Categories

​
Layout Widgets

Widgets that arrange other widgets:
  • Row - Horizontal layout
  • Column - Vertical layout
  • Container - Single child with alignment and styling
  • Scrollable - Scrollable content area
  • Stack - Layered children
  • Grid - Grid layout
  • Float - Floating positioned elements

​
Input Widgets

Widgets for user interaction:
  • Button - Clickable button
  • TextInput - Single-line text input
  • TextEditor - Multi-line text editor
  • Checkbox - Boolean checkbox
  • Radio - Radio button selection
  • Toggler - Toggle switch
  • Slider - Horizontal slider
  • VerticalSlider - Vertical slider
  • PickList - Dropdown selection
  • ComboBox - Searchable dropdown

​
Display Widgets

Widgets for displaying content:
  • Text - Text display
  • Image - Image display
  • Svg - SVG rendering
  • ProgressBar - Progress indicator
  • QRCode - QR code display
  • Rule - Horizontal or vertical line
  • Space - Empty space

​
Advanced Widgets

Specialized widgets:
  • Canvas - 2D graphics drawing
  • PaneGrid - Resizable panes
  • Tooltip - Hover tooltips
  • MouseArea - Custom mouse interaction
  • Responsive - Responsive layout
  • Markdown - Markdown rendering
  • Table - Table display

​
Common Properties

Most widgets support these common methods:

​
Sizing

widget
    .width(Length::Fill)           // Take all available width
    .height(Length::Shrink)        // Fit content height
    .width(Length::Fixed(200.0))   // Fixed width in pixels

​
Padding

widget
    .padding(10)                   // All sides
    .padding([10, 20])            // Vertical, horizontal
    .padding([10, 20, 30, 40])    // Top, right, bottom, left

​
Styling

button("Styled")
    .style(button::primary)        // Use theme style
    .style(|theme, status| {       // Custom style
        button::Style {
            background: Some(Color::from_rgb(0.2, 0.5, 0.8).into()),
            ..button::primary(theme, status)
        }
    })

​
Length Types

Iced uses the Length enum for sizing:
  • Length::Shrink - Fit the content
  • Length::Fill - Take all available space
  • Length::FillPortion(u16) - Take a proportional amount
  • Length::Fixed(f32) - Fixed size in pixels

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us