Use `f32` in `Length::Units` and rename it to `Fixed`

43 files changed, 269 insertions, 262 deletions

diff --git a/core/src/length.rs b/core/src/length.rs
index 95ea6e0e..bb925c4b 100644
--- a/core/src/length.rs
+++ b/core/src/length.rs
@@ -1,5 +1,5 @@
 /// The strategy used to fill space in a specific dimension.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Length {
     /// Fill all the remaining space
     Fill,
@@ -17,7 +17,7 @@ pub enum Length {
     Shrink,
 
     /// Fill a fixed amount of space
-    Units(u16),
+    Fixed(f32),
 }
 
 impl Length {
@@ -31,13 +31,19 @@ impl Length {
             Length::Fill => 1,
             Length::FillPortion(factor) => *factor,
             Length::Shrink => 0,
-            Length::Units(_) => 0,
+            Length::Fixed(_) => 0,
         }
     }
 }
 
+impl From<f32> for Length {
+    fn from(amount: f32) -> Self {
+        Length::Fixed(amount)
+    }
+}
+
 impl From<u16> for Length {
     fn from(units: u16) -> Self {
-        Length::Units(units)
+        Length::Fixed(f32::from(units))
     }
 }
diff --git a/core/src/lib.rs b/core/src/lib.rs
index 3aa5defe..31280a05 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -35,6 +35,7 @@ mod content_fit;
 mod font;
 mod length;
 mod padding;
+mod pixels;
 mod point;
 mod rectangle;
 mod size;
@@ -47,6 +48,7 @@ pub use content_fit::ContentFit;
 pub use font::Font;
 pub use length::Length;
 pub use padding::Padding;
+pub use pixels::Pixels;
 pub use point::Point;
 pub use rectangle::Rectangle;
 pub use size::Size;
diff --git a/core/src/pixels.rs b/core/src/pixels.rs
new file mode 100644
index 00000000..e42cd9f9
--- /dev/null
+++ b/core/src/pixels.rs
@@ -0,0 +1,22 @@
+/// An amount of logical pixels.
+///
+/// Normally used to represent an amount of space, or the size of something.
+///
+/// This type is normally asked as an argument in a generic way
+/// (e.g. `impl Into<Pixels>`) and, since `Pixels` implements `From` both for
+/// `f32` and `u16`, you should be able to provide both integers and float
+/// literals as needed.
+#[derive(Debug, Clone, Copy, PartialEq, PartialOrd)]
+pub struct Pixels(pub f32);
+
+impl From<f32> for Pixels {
+    fn from(amount: f32) -> Self {
+        Self(amount)
+    }
+}
+
+impl From<u16> for Pixels {
+    fn from(amount: u16) -> Self {
+        Self(f32::from(amount))
+    }
+}
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index 42149965..a2df36c2 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -301,11 +301,11 @@ impl<C: ColorSpace + Copy> ColorPicker<C> {
         }
 
         row![
-            text(C::LABEL).width(Length::Units(50)),
+            text(C::LABEL).width(50),
             slider(cr1, c1, move |v| C::new(v, c2, c3)),
             slider(cr2, c2, move |v| C::new(c1, v, c3)),
             slider(cr3, c3, move |v| C::new(c1, c2, v)),
-            text(color.to_string()).width(Length::Units(185)).size(14),
+            text(color.to_string()).width(185).size(14),
         ]
         .spacing(10)
         .align_items(Alignment::Center)
diff --git a/examples/component/src/main.rs b/examples/component/src/main.rs
index 06b1e53a..c407bb06 100644
--- a/examples/component/src/main.rs
+++ b/examples/component/src/main.rs
@@ -127,7 +127,7 @@ mod numeric_input {
                         .horizontal_alignment(alignment::Horizontal::Center)
                         .vertical_alignment(alignment::Vertical::Center),
                 )
-                .width(Length::Units(50))
+                .width(50)
                 .on_press(on_press)
             };
 
diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs
index 0e583479..1b97018e 100644
--- a/examples/events/src/main.rs
+++ b/examples/events/src/main.rs
@@ -93,7 +93,7 @@ impl Application for Events {
                 .width(Length::Fill)
                 .horizontal_alignment(alignment::Horizontal::Center),
         )
-        .width(Length::Units(100))
+        .width(100)
         .padding(10)
         .on_press(Message::Exit);
 
diff --git a/examples/integration_opengl/src/controls.rs b/examples/integration_opengl/src/controls.rs
index 22c41066..c3648f44 100644
--- a/examples/integration_opengl/src/controls.rs
+++ b/examples/integration_opengl/src/controls.rs
@@ -42,7 +42,7 @@ impl Program for Controls {
         let background_color = self.background_color;
 
         let sliders = Row::new()
-            .width(Length::Units(500))
+            .width(500)
             .spacing(20)
             .push(
                 Slider::new(0.0..=1.0, background_color.r, move |r| {
diff --git a/examples/integration_wgpu/src/controls.rs b/examples/integration_wgpu/src/controls.rs
index 92300a45..533cb6e2 100644
--- a/examples/integration_wgpu/src/controls.rs
+++ b/examples/integration_wgpu/src/controls.rs
@@ -48,7 +48,7 @@ impl Program for Controls {
         let text = &self.text;
 
         let sliders = Row::new()
-            .width(Length::Units(500))
+            .width(500)
             .spacing(20)
             .push(
                 slider(0.0..=1.0, background_color.r, move |r| {
diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs
index 5afafd0d..54555684 100644
--- a/examples/modal/src/main.rs
+++ b/examples/modal/src/main.rs
@@ -156,7 +156,7 @@ impl Application for App {
                 ]
                 .spacing(20),
             )
-            .width(Length::Units(300))
+            .width(300)
             .padding(10)
             .style(theme::Container::Box);
 
diff --git a/examples/pick_list/src/main.rs b/examples/pick_list/src/main.rs
index 9df1f5c7..62a4ef88 100644
--- a/examples/pick_list/src/main.rs
+++ b/examples/pick_list/src/main.rs
@@ -43,10 +43,10 @@ impl Sandbox for Example {
         .placeholder("Choose a language...");
 
         let content = column![
-            vertical_space(Length::Units(600)),
+            vertical_space(600),
             "Which is your favorite language?",
             pick_list,
-            vertical_space(Length::Units(600)),
+            vertical_space(600),
         ]
         .width(Length::Fill)
         .align_items(Alignment::Center)
diff --git a/examples/qr_code/src/main.rs b/examples/qr_code/src/main.rs
index c10c665b..d8041745 100644
--- a/examples/qr_code/src/main.rs
+++ b/examples/qr_code/src/main.rs
@@ -58,7 +58,7 @@ impl Sandbox for QRGenerator {
         .padding(15);
 
         let mut content = column![title, input]
-            .width(Length::Units(700))
+            .width(700)
             .spacing(20)
             .align_items(Alignment::Center);
 
diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
index 128d98b2..7c858961 100644
--- a/examples/scrollable/src/main.rs
+++ b/examples/scrollable/src/main.rs
@@ -187,9 +187,9 @@ impl Application for ScrollableDemo {
                     column![
                         scroll_to_end_button(),
                         text("Beginning!"),
-                        vertical_space(Length::Units(1200)),
+                        vertical_space(1200),
                         text("Middle!"),
-                        vertical_space(Length::Units(1200)),
+                        vertical_space(1200),
                         text("End!"),
                         scroll_to_beginning_button(),
                     ]
@@ -211,13 +211,13 @@ impl Application for ScrollableDemo {
                     row![
                         scroll_to_end_button(),
                         text("Beginning!"),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         text("Middle!"),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         text("End!"),
                         scroll_to_beginning_button(),
                     ]
-                    .height(Length::Units(450))
+                    .height(450)
                     .align_items(Alignment::Center)
                     .padding([0, 40, 0, 40])
                     .spacing(40),
@@ -237,26 +237,26 @@ impl Application for ScrollableDemo {
                     row![
                         column![
                             text("Let's do some scrolling!"),
-                            vertical_space(Length::Units(2400))
+                            vertical_space(2400)
                         ],
                         scroll_to_end_button(),
                         text("Horizontal - Beginning!"),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         //vertical content
                         column![
                             text("Horizontal - Middle!"),
                             scroll_to_end_button(),
                             text("Vertical - Beginning!"),
-                            vertical_space(Length::Units(1200)),
+                            vertical_space(1200),
                             text("Vertical - Middle!"),
-                            vertical_space(Length::Units(1200)),
+                            vertical_space(1200),
                             text("Vertical - End!"),
                             scroll_to_beginning_button(),
-                            vertical_space(Length::Units(40)),
+                            vertical_space(40),
                         ]
                         .align_items(Alignment::Fill)
                         .spacing(40),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         text("Horizontal - End!"),
                         scroll_to_beginning_button(),
                     ]
diff --git a/examples/slider/src/main.rs b/examples/slider/src/main.rs
index 6286d625..e83804c2 100644
--- a/examples/slider/src/main.rs
+++ b/examples/slider/src/main.rs
@@ -38,11 +38,11 @@ impl Sandbox for Slider {
 
         let h_slider =
             container(slider(0..=100, value, Message::SliderChanged))
-                .width(Length::Units(250));
+                .width(250);
 
         let v_slider =
             container(vertical_slider(0..=100, value, Message::SliderChanged))
-                .height(Length::Units(200));
+                .height(200);
 
         let text = text(format!("{value}"));
 
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
index b8cee807..9581a3ce 100644
--- a/examples/stopwatch/src/main.rs
+++ b/examples/stopwatch/src/main.rs
@@ -105,7 +105,7 @@ impl Application for Stopwatch {
                 text(label).horizontal_alignment(alignment::Horizontal::Center),
             )
             .padding(10)
-            .width(Length::Units(80))
+            .width(80)
         };
 
         let toggle_button = {
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index 49bedce7..448c9792 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -108,14 +108,10 @@ impl Sandbox for Styling {
         let progress_bar = progress_bar(0.0..=100.0, self.slider_value);
 
         let scrollable = scrollable(
-            column![
-                "Scroll me!",
-                vertical_space(Length::Units(800)),
-                "You did it!"
-            ]
-            .width(Length::Fill),
+            column!["Scroll me!", vertical_space(800), "You did it!"]
+                .width(Length::Fill),
         )
-        .height(Length::Units(100));
+        .height(100);
 
         let checkbox = checkbox(
             "Check me!",
@@ -143,7 +139,7 @@ impl Sandbox for Styling {
                 column![checkbox, toggler].spacing(20)
             ]
             .spacing(10)
-            .height(Length::Units(100))
+            .height(100)
             .align_items(Alignment::Center),
         ]
         .spacing(20)
diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs
index 04411ed7..6408f09c 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -460,7 +460,7 @@ fn empty_message(message: &str) -> Element<'_, Message> {
             .style(Color::from([0.7, 0.7, 0.7])),
     )
     .width(Length::Fill)
-    .height(Length::Units(200))
+    .height(200)
     .center_y()
     .into()
 }
@@ -474,7 +474,7 @@ const ICONS: Font = Font::External {
 fn icon(unicode: char) -> Text<'static> {
     text(unicode.to_string())
         .font(ICONS)
-        .width(Length::Units(20))
+        .width(20)
         .horizontal_alignment(alignment::Horizontal::Center)
         .size(20)
 }
diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index 5ee65562..de063d00 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -513,14 +513,14 @@ impl<'a> Step {
                 text("Tip: You can use the scrollbar to scroll down faster!")
                     .size(16),
             )
-            .push(vertical_space(Length::Units(4096)))
+            .push(vertical_space(4096))
             .push(
                 text("You are halfway there!")
                     .width(Length::Fill)
                     .size(30)
                     .horizontal_alignment(alignment::Horizontal::Center),
             )
-            .push(vertical_space(Length::Units(4096)))
+            .push(vertical_space(4096))
             .push(ferris(300))
             .push(
                 text("You made it!")
@@ -605,7 +605,7 @@ fn ferris<'a>(width: u16) -> Container<'a, StepMessage> {
         } else {
             image(format!("{}/images/ferris.png", env!("CARGO_MANIFEST_DIR")))
         }
-        .width(Length::Units(width)),
+        .width(width),
     )
     .width(Length::Fill)
     .center_x()
@@ -616,7 +616,7 @@ fn button<'a, Message: Clone>(label: &str) -> Button<'a, Message> {
         text(label).horizontal_alignment(alignment::Horizontal::Center),
     )
     .padding(12)
-    .width(Length::Units(100))
+    .width(100)
 }
 
 fn color_slider<'a>(
diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs
index b070d0a6..a8d050f5 100644
--- a/graphics/src/widget/canvas.rs
+++ b/graphics/src/widget/canvas.rs
@@ -100,13 +100,13 @@ impl<Message, Theme, P> Canvas<Message, Theme, P>
 where
     P: Program<Message, Theme>,
 {
-    const DEFAULT_SIZE: u16 = 100;
+    const DEFAULT_SIZE: f32 = 100.0;
 
     /// Creates a new [`Canvas`].
     pub fn new(program: P) -> Self {
         Canvas {
-            width: Length::Units(Self::DEFAULT_SIZE),
-            height: Length::Units(Self::DEFAULT_SIZE),
+            width: Length::Fixed(Self::DEFAULT_SIZE),
+            height: Length::Fixed(Self::DEFAULT_SIZE),
             program,
             message_: PhantomData,
             theme_: PhantomData,
@@ -114,14 +114,14 @@ where
     }
 
     /// Sets the width of the [`Canvas`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Canvas`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 }
diff --git a/lazy/src/responsive.rs b/lazy/src/responsive.rs
index 93069493..57c07de1 100644
--- a/lazy/src/responsive.rs
+++ b/lazy/src/responsive.rs
@@ -42,7 +42,7 @@ where
             content: RefCell::new(Content {
                 size: Size::ZERO,
                 layout: layout::Node::new(Size::ZERO),
-                element: Element::new(horizontal_space(Length::Units(0))),
+                element: Element::new(horizontal_space(0)),
             }),
         }
     }
diff --git a/native/src/layout/limits.rs b/native/src/layout/limits.rs
index 4cbb970d..137a054c 100644
--- a/native/src/layout/limits.rs
+++ b/native/src/layout/limits.rs
@@ -42,17 +42,16 @@ impl Limits {
     }
 
     /// Applies a width constraint to the current [`Limits`].
-    pub fn width(mut self, width: Length) -> Limits {
-        match width {
+    pub fn width(mut self, width: impl Into<Length>) -> Limits {
+        match width.into() {
             Length::Shrink => {
                 self.fill.width = self.min.width;
             }
             Length::Fill | Length::FillPortion(_) => {
                 self.fill.width = self.fill.width.min(self.max.width);
             }
-            Length::Units(units) => {
-                let new_width =
-                    (units as f32).min(self.max.width).max(self.min.width);
+            Length::Fixed(amount) => {
+                let new_width = amount.min(self.max.width).max(self.min.width);
 
                 self.min.width = new_width;
                 self.max.width = new_width;
@@ -64,17 +63,17 @@ impl Limits {
     }
 
     /// Applies a height constraint to the current [`Limits`].
-    pub fn height(mut self, height: Length) -> Limits {
-        match height {
+    pub fn height(mut self, height: impl Into<Length>) -> Limits {
+        match height.into() {
             Length::Shrink => {
                 self.fill.height = self.min.height;
             }
             Length::Fill | Length::FillPortion(_) => {
                 self.fill.height = self.fill.height.min(self.max.height);
             }
-            Length::Units(units) => {
+            Length::Fixed(amount) => {
                 let new_height =
-                    (units as f32).min(self.max.height).max(self.min.height);
+                    amount.min(self.max.height).max(self.min.height);
 
                 self.min.height = new_height;
                 self.max.height = new_height;
@@ -86,33 +85,29 @@ impl Limits {
     }
 
     /// Applies a minimum width constraint to the current [`Limits`].
-    pub fn min_width(mut self, min_width: u32) -> Limits {
-        self.min.width =
-            self.min.width.max(min_width as f32).min(self.max.width);
+    pub fn min_width(mut self, min_width: f32) -> Limits {
+        self.min.width = self.min.width.max(min_width).min(self.max.width);
 
         self
     }
 
     /// Applies a maximum width constraint to the current [`Limits`].
-    pub fn max_width(mut self, max_width: u32) -> Limits {
-        self.max.width =
-            self.max.width.min(max_width as f32).max(self.min.width);
+    pub fn max_width(mut self, max_width: f32) -> Limits {
+        self.max.width = self.max.width.min(max_width).max(self.min.width);
 
         self
     }
 
     /// Applies a minimum height constraint to the current [`Limits`].
-    pub fn min_height(mut self, min_height: u32) -> Limits {
-        self.min.height =
-            self.min.height.max(min_height as f32).min(self.max.height);
+    pub fn min_height(mut self, min_height: f32) -> Limits {
+        self.min.height = self.min.height.max(min_height).min(self.max.height);
 
         self
     }
 
     /// Applies a maximum height constraint to the current [`Limits`].
-    pub fn max_height(mut self, max_height: u32) -> Limits {
-        self.max.height =
-            self.max.height.min(max_height as f32).max(self.min.height);
+    pub fn max_height(mut self, max_height: f32) -> Limits {
+        self.max.height = self.max.height.min(max_height).max(self.min.height);
 
         self
     }
diff --git a/native/src/lib.rs b/native/src/lib.rs
index 124423a6..7c406ae5 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -81,7 +81,7 @@ pub use iced_core::alignment;
 pub use iced_core::time;
 pub use iced_core::{
     color, Alignment, Background, Color, ContentFit, Font, Length, Padding,
-    Point, Rectangle, Size, Vector,
+    Pixels, Point, Rectangle, Size, Vector,
 };
 pub use iced_futures::{executor, futures};
 pub use iced_style::application;
diff --git a/native/src/overlay/menu.rs b/native/src/overlay/menu.rs
index 9e37380f..bd1f309e 100644
--- a/native/src/overlay/menu.rs
+++ b/native/src/overlay/menu.rs
@@ -28,7 +28,7 @@ where
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
     last_selection: &'a mut Option<T>,
-    width: u16,
+    width: f32,
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
@@ -55,7 +55,7 @@ where
             options,
             hovered_option,
             last_selection,
-            width: 0,
+            width: 0.0,
             padding: Padding::ZERO,
             text_size: None,
             font: Default::default(),
@@ -64,7 +64,7 @@ where
     }
 
     /// Sets the width of the [`Menu`].
-    pub fn width(mut self, width: u16) -> Self {
+    pub fn width(mut self, width: f32) -> Self {
         self.width = width;
         self
     }
@@ -142,7 +142,7 @@ where
 {
     state: &'a mut Tree,
     container: Container<'a, Message, Renderer>,
-    width: u16,
+    width: f32,
     target_height: f32,
     style: <Renderer::Theme as StyleSheet>::Style,
 }
@@ -219,7 +219,7 @@ where
                 },
             ),
         )
-        .width(Length::Units(self.width));
+        .width(self.width);
 
         let mut node = self.container.layout(renderer, &limits);
 
diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs
index b4276317..3d96dfe1 100644
--- a/native/src/widget/button.rs
+++ b/native/src/widget/button.rs
@@ -82,14 +82,14 @@ where
     }
 
     /// Sets the width of the [`Button`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Button`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index f6298a8c..d2b5157a 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -8,8 +8,8 @@ use crate::text;
 use crate::touch;
 use crate::widget::{self, Row, Text, Tree};
 use crate::{
-    Alignment, Clipboard, Element, Layout, Length, Point, Rectangle, Shell,
-    Widget,
+    Alignment, Clipboard, Element, Layout, Length, Pixels, Point, Rectangle,
+    Shell, Widget,
 };
 
 pub use iced_style::checkbox::{Appearance, StyleSheet};
@@ -52,7 +52,7 @@ where
     on_toggle: Box<dyn Fn(bool) -> Message + 'a>,
     label: String,
     width: Length,
-    size: u16,
+    size: f32,
     spacing: u16,
     text_size: Option<u16>,
     font: Renderer::Font,
@@ -66,7 +66,7 @@ where
     Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     /// The default size of a [`Checkbox`].
-    const DEFAULT_SIZE: u16 = 20;
+    const DEFAULT_SIZE: f32 = 20.0;
 
     /// The default spacing of a [`Checkbox`].
     const DEFAULT_SPACING: u16 = 15;
@@ -102,14 +102,14 @@ where
     }
 
     /// Sets the size of the [`Checkbox`].
-    pub fn size(mut self, size: u16) -> Self {
-        self.size = size;
+    pub fn size(mut self, size: impl Into<Pixels>) -> Self {
+        self.size = size.into().0;
         self
     }
 
     /// Sets the width of the [`Checkbox`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
@@ -172,11 +172,7 @@ where
             .width(self.width)
             .spacing(self.spacing)
             .align_items(Alignment::Center)
-            .push(
-                Row::new()
-                    .width(Length::Units(self.size))
-                    .height(Length::Units(self.size)),
-            )
+            .push(Row::new().width(self.size).height(self.size))
             .push(
                 Text::new(&self.label)
                     .font(self.font.clone())
diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs
index 5ad4d858..65ca76a1 100644
--- a/native/src/widget/column.rs
+++ b/native/src/widget/column.rs
@@ -6,8 +6,8 @@ use crate::overlay;
 use crate::renderer;
 use crate::widget::{Operation, Tree};
 use crate::{
-    Alignment, Clipboard, Element, Layout, Length, Padding, Point, Rectangle,
-    Shell, Widget,
+    Alignment, Clipboard, Element, Layout, Length, Padding, Pixels, Point,
+    Rectangle, Shell, Widget,
 };
 
 /// A container that distributes its contents vertically.
@@ -17,7 +17,7 @@ pub struct Column<'a, Message, Renderer> {
     padding: Padding,
     width: Length,
     height: Length,
-    max_width: u32,
+    max_width: f32,
     align_items: Alignment,
     children: Vec<Element<'a, Message, Renderer>>,
 }
@@ -37,7 +37,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
             padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
-            max_width: u32::MAX,
+            max_width: f32::INFINITY,
             align_items: Alignment::Start,
             children,
         }
@@ -60,20 +60,20 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     }
 
     /// Sets the width of the [`Column`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Column`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
     /// Sets the maximum width of the [`Column`].
-    pub fn max_width(mut self, max_width: u32) -> Self {
-        self.max_width = max_width;
+    pub fn max_width(mut self, max_width: impl Into<Pixels>) -> Self {
+        self.max_width = max_width.into().0;
         self
     }
 
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index c82b8be2..1621cf6e 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -7,12 +7,10 @@ use crate::overlay;
 use crate::renderer;
 use crate::widget::{self, Operation, Tree};
 use crate::{
-    Background, Clipboard, Color, Element, Layout, Length, Padding, Point,
-    Rectangle, Shell, Widget,
+    Background, Clipboard, Color, Element, Layout, Length, Padding, Pixels,
+    Point, Rectangle, Shell, Widget,
 };
 
-use std::u32;
-
 pub use iced_style::container::{Appearance, StyleSheet};
 
 /// An element decorating some content.
@@ -28,8 +26,8 @@ where
     padding: Padding,
     width: Length,
     height: Length,
-    max_width: u32,
-    max_height: u32,
+    max_width: f32,
+    max_height: f32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
     style: <Renderer::Theme as StyleSheet>::Style,
@@ -51,8 +49,8 @@ where
             padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
-            max_width: u32::MAX,
-            max_height: u32::MAX,
+            max_width: f32::INFINITY,
+            max_height: f32::INFINITY,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
             style: Default::default(),
@@ -73,26 +71,26 @@ where
     }
 
     /// Sets the width of the [`Container`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Container`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
     /// Sets the maximum width of the [`Container`].
-    pub fn max_width(mut self, max_width: u32) -> Self {
-        self.max_width = max_width;
+    pub fn max_width(mut self, max_width: impl Into<Pixels>) -> Self {
+        self.max_width = max_width.into().0;
         self
     }
 
-    /// Sets the maximum height of the [`Container`] in pixels.
-    pub fn max_height(mut self, max_height: u32) -> Self {
-        self.max_height = max_height;
+    /// Sets the maximum height of the [`Container`].
+    pub fn max_height(mut self, max_height: impl Into<Pixels>) -> Self {
+        self.max_height = max_height.into().0;
         self
     }
 
@@ -294,8 +292,8 @@ pub fn layout<Renderer>(
     limits: &layout::Limits,
     width: Length,
     height: Length,
-    max_width: u32,
-    max_height: u32,
+    max_width: f32,
+    max_height: f32,
     padding: Padding,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
diff --git a/native/src/widget/helpers.rs b/native/src/widget/helpers.rs
index dfd949f6..d13eca75 100644
--- a/native/src/widget/helpers.rs
+++ b/native/src/widget/helpers.rs
@@ -1,7 +1,7 @@
 //! Helper functions to create pure widgets.
 use crate::overlay;
 use crate::widget;
-use crate::{Element, Length};
+use crate::{Element, Length, Pixels};
 
 use std::borrow::Cow;
 use std::ops::RangeInclusive;
@@ -247,21 +247,23 @@ pub fn image<Handle>(handle: impl Into<Handle>) -> widget::Image<Handle> {
 /// Creates a new horizontal [`Space`] with the given [`Length`].
 ///
 /// [`Space`]: widget::Space
-pub fn horizontal_space(width: Length) -> widget::Space {
+pub fn horizontal_space(width: impl Into<Length>) -> widget::Space {
     widget::Space::with_width(width)
 }
 
 /// Creates a new vertical [`Space`] with the given [`Length`].
 ///
 /// [`Space`]: widget::Space
-pub fn vertical_space(height: Length) -> widget::Space {
+pub fn vertical_space(height: impl Into<Length>) -> widget::Space {
     widget::Space::with_height(height)
 }
 
 /// Creates a horizontal [`Rule`] with the given height.
 ///
 /// [`Rule`]: widget::Rule
-pub fn horizontal_rule<Renderer>(height: u16) -> widget::Rule<Renderer>
+pub fn horizontal_rule<Renderer>(
+    height: impl Into<Pixels>,
+) -> widget::Rule<Renderer>
 where
     Renderer: crate::Renderer,
     Renderer::Theme: widget::rule::StyleSheet,
@@ -272,7 +274,9 @@ where
 /// Creates a vertical [`Rule`] with the given width.
 ///
 /// [`Rule`]: widget::Rule
-pub fn vertical_rule<Renderer>(width: u16) -> widget::Rule<Renderer>
+pub fn vertical_rule<Renderer>(
+    width: impl Into<Pixels>,
+) -> widget::Rule<Renderer>
 where
     Renderer: crate::Renderer,
     Renderer::Theme: widget::rule::StyleSheet,
diff --git a/native/src/widget/image.rs b/native/src/widget/image.rs
index 3ff06a76..73257a74 100644
--- a/native/src/widget/image.rs
+++ b/native/src/widget/image.rs
@@ -29,7 +29,7 @@ pub fn viewer<Handle>(handle: Handle) -> Viewer<Handle> {
 /// ```
 ///
 /// <img src="https://github.com/iced-rs/iced/blob/9712b319bb7a32848001b96bd84977430f14b623/examples/resources/ferris.png?raw=true" width="300">
-#[derive(Debug, Hash)]
+#[derive(Debug)]
 pub struct Image<Handle> {
     handle: Handle,
     width: Length,
@@ -49,14 +49,14 @@ impl<Handle> Image<Handle> {
     }
 
     /// Sets the width of the [`Image`] boundaries.
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Image`] boundaries.
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
diff --git a/native/src/widget/image/viewer.rs b/native/src/widget/image/viewer.rs
index fdbd3216..a9d3e5b4 100644
--- a/native/src/widget/image/viewer.rs
+++ b/native/src/widget/image/viewer.rs
@@ -45,14 +45,14 @@ impl<Handle> Viewer<Handle> {
     }
 
     /// Sets the width of the [`Viewer`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Viewer`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
@@ -124,7 +124,7 @@ where
         // Only calculate viewport sizes if the images are constrained to a limited space.
         // If they are Fill|Portion let them expand within their alotted space.
         match expansion_size {
-            Length::Shrink | Length::Units(_) => {
+            Length::Shrink | Length::Fixed(_) => {
                 let aspect_ratio = width as f32 / height as f32;
                 let viewport_aspect_ratio = size.width / size.height;
                 if viewport_aspect_ratio > aspect_ratio {
diff --git a/native/src/widget/pane_grid.rs b/native/src/widget/pane_grid.rs
index eb04c0ba..c6ff61ac 100644
--- a/native/src/widget/pane_grid.rs
+++ b/native/src/widget/pane_grid.rs
@@ -159,14 +159,14 @@ where
     }
 
     /// Sets the width of the [`PaneGrid`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`PaneGrid`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs
index b1cdfad4..1c0886f2 100644
--- a/native/src/widget/pick_list.rs
+++ b/native/src/widget/pick_list.rs
@@ -83,8 +83,8 @@ where
     }
 
     /// Sets the width of the [`PickList`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
@@ -539,7 +539,7 @@ where
             &mut state.hovered_option,
             &mut state.last_selection,
         )
-        .width(bounds.width.round() as u16)
+        .width(bounds.width)
         .padding(padding)
         .font(font)
         .style(style);
diff --git a/native/src/widget/progress_bar.rs b/native/src/widget/progress_bar.rs
index 7d5d5be5..dd46fa76 100644
--- a/native/src/widget/progress_bar.rs
+++ b/native/src/widget/progress_bar.rs
@@ -38,7 +38,7 @@ where
     Renderer::Theme: StyleSheet,
 {
     /// The default height of a [`ProgressBar`].
-    pub const DEFAULT_HEIGHT: u16 = 30;
+    pub const DEFAULT_HEIGHT: f32 = 30.0;
 
     /// Creates a new [`ProgressBar`].
     ///
@@ -56,14 +56,14 @@ where
     }
 
     /// Sets the width of the [`ProgressBar`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`ProgressBar`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = Some(height);
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = Some(height.into());
         self
     }
 
@@ -87,7 +87,7 @@ where
     }
 
     fn height(&self) -> Length {
-        self.height.unwrap_or(Length::Units(Self::DEFAULT_HEIGHT))
+        self.height.unwrap_or(Length::Fixed(Self::DEFAULT_HEIGHT))
     }
 
     fn layout(
@@ -97,7 +97,7 @@ where
     ) -> layout::Node {
         let limits = limits
             .width(self.width)
-            .height(self.height.unwrap_or(Length::Units(Self::DEFAULT_HEIGHT)));
+            .height(self.height.unwrap_or(Length::Fixed(Self::DEFAULT_HEIGHT)));
 
         let size = limits.resolve(Size::ZERO);
 
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index b95ccc5b..22aeb4ce 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -50,7 +50,7 @@ where
     on_click: Message,
     label: String,
     width: Length,
-    size: u16,
+    size: f32,
     spacing: u16,
     text_size: Option<u16>,
     font: Renderer::Font,
@@ -64,7 +64,7 @@ where
     Renderer::Theme: StyleSheet,
 {
     /// The default size of a [`Radio`] button.
-    pub const DEFAULT_SIZE: u16 = 28;
+    pub const DEFAULT_SIZE: f32 = 28.0;
 
     /// The default spacing of a [`Radio`] button.
     pub const DEFAULT_SPACING: u16 = 15;
@@ -101,14 +101,14 @@ where
     }
 
     /// Sets the size of the [`Radio`] button.
-    pub fn size(mut self, size: u16) -> Self {
+    pub fn size(mut self, size: f32) -> Self {
         self.size = size;
         self
     }
 
     /// Sets the width of the [`Radio`] button.
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
@@ -163,11 +163,7 @@ where
             .width(self.width)
             .spacing(self.spacing)
             .align_items(Alignment::Center)
-            .push(
-                Row::new()
-                    .width(Length::Units(self.size))
-                    .height(Length::Units(self.size)),
-            )
+            .push(Row::new().width(self.size).height(self.size))
             .push(Text::new(&self.label).width(self.width).size(
                 self.text_size.unwrap_or_else(|| renderer.default_size()),
             ))
diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs
index 108e98e4..a340d84a 100644
--- a/native/src/widget/row.rs
+++ b/native/src/widget/row.rs
@@ -58,14 +58,14 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     }
 
     /// Sets the width of the [`Row`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Row`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
diff --git a/native/src/widget/rule.rs b/native/src/widget/rule.rs
index 2dc7b6f0..1ab6a0d3 100644
--- a/native/src/widget/rule.rs
+++ b/native/src/widget/rule.rs
@@ -2,7 +2,9 @@
 use crate::layout;
 use crate::renderer;
 use crate::widget::Tree;
-use crate::{Color, Element, Layout, Length, Point, Rectangle, Size, Widget};
+use crate::{
+    Color, Element, Layout, Length, Pixels, Point, Rectangle, Size, Widget,
+};
 
 pub use iced_style::rule::{Appearance, FillMode, StyleSheet};
 
@@ -25,19 +27,19 @@ where
     Renderer::Theme: StyleSheet,
 {
     /// Creates a horizontal [`Rule`] with the given height.
-    pub fn horizontal(height: u16) -> Self {
+    pub fn horizontal(height: impl Into<Pixels>) -> Self {
         Rule {
             width: Length::Fill,
-            height: Length::Units(height),
+            height: Length::Fixed(height.into().0),
             is_horizontal: true,
             style: Default::default(),
         }
     }
 
     /// Creates a vertical [`Rule`] with the given width.
-    pub fn vertical(width: u16) -> Self {
+    pub fn vertical(width: impl Into<Pixels>) -> Self {
         Rule {
-            width: Length::Units(width),
+            width: Length::Fixed(width.into().0),
             height: Length::Fill,
             is_horizontal: false,
             style: Default::default(),
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 2de722e4..e084d4b0 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -10,8 +10,8 @@ use crate::widget;
 use crate::widget::operation::{self, Operation};
 use crate::widget::tree::{self, Tree};
 use crate::{
-    Background, Clipboard, Color, Command, Element, Layout, Length, Point,
-    Rectangle, Shell, Size, Vector, Widget,
+    Background, Clipboard, Color, Command, Element, Layout, Length, Pixels,
+    Point, Rectangle, Shell, Size, Vector, Widget,
 };
 
 pub use iced_style::scrollable::StyleSheet;
@@ -66,8 +66,8 @@ where
     }
 
     /// Sets the height of the [`Scrollable`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
@@ -108,17 +108,17 @@ where
 /// Properties of a scrollbar within a [`Scrollable`].
 #[derive(Debug)]
 pub struct Properties {
-    width: u16,
-    margin: u16,
-    scroller_width: u16,
+    width: f32,
+    margin: f32,
+    scroller_width: f32,
 }
 
 impl Default for Properties {
     fn default() -> Self {
         Self {
-            width: 10,
-            margin: 0,
-            scroller_width: 10,
+            width: 10.0,
+            margin: 0.0,
+            scroller_width: 10.0,
         }
     }
 }
@@ -131,21 +131,21 @@ impl Properties {
 
     /// Sets the scrollbar width of the [`Scrollable`] .
     /// Silently enforces a minimum width of 1.
-    pub fn width(mut self, width: u16) -> Self {
-        self.width = width.max(1);
+    pub fn width(mut self, width: impl Into<Pixels>) -> Self {
+        self.width = width.into().0.max(1.0);
         self
     }
 
     /// Sets the scrollbar margin of the [`Scrollable`] .
-    pub fn margin(mut self, margin: u16) -> Self {
-        self.margin = margin;
+    pub fn margin(mut self, margin: impl Into<Pixels>) -> Self {
+        self.margin = margin.into().0;
         self
     }
 
     /// Sets the scroller width of the [`Scrollable`] .
     /// Silently enforces a minimum width of 1.
-    pub fn scroller_width(mut self, scroller_width: u16) -> Self {
-        self.scroller_width = scroller_width.max(1);
+    pub fn scroller_width(mut self, scroller_width: impl Into<Pixels>) -> Self {
+        self.scroller_width = scroller_width.into().0.max(1.0);
         self
     }
 }
@@ -398,11 +398,11 @@ pub fn layout<Renderer>(
     layout_content: impl FnOnce(&Renderer, &layout::Limits) -> layout::Node,
 ) -> layout::Node {
     let limits = limits
-        .max_height(u32::MAX)
+        .max_height(f32::INFINITY)
         .max_width(if horizontal_enabled {
-            u32::MAX
+            f32::INFINITY
         } else {
-            limits.max().width as u32
+            limits.max().width
         })
         .width(width)
         .height(height);
@@ -1100,26 +1100,26 @@ impl Scrollbars {
 
             // Adjust the height of the vertical scrollbar if the horizontal scrollbar
             // is present
-            let x_scrollbar_height = show_scrollbar_x.map_or(0.0, |h| {
-                (h.width.max(h.scroller_width) + h.margin) as f32
-            });
+            let x_scrollbar_height = show_scrollbar_x
+                .map_or(0.0, |h| h.width.max(h.scroller_width) + h.margin);
 
-            let total_scrollbar_width = width.max(scroller_width) + 2 * margin;
+            let total_scrollbar_width =
+                width.max(scroller_width) + 2.0 * margin;
 
             // Total bounds of the scrollbar + margin + scroller width
             let total_scrollbar_bounds = Rectangle {
-                x: bounds.x + bounds.width - total_scrollbar_width as f32,
+                x: bounds.x + bounds.width - total_scrollbar_width,
                 y: bounds.y,
-                width: total_scrollbar_width as f32,
+                width: total_scrollbar_width,
                 height: (bounds.height - x_scrollbar_height).max(0.0),
             };
 
             // Bounds of just the scrollbar
             let scrollbar_bounds = Rectangle {
-                x: bounds.x + bounds.width
-                    - f32::from(total_scrollbar_width / 2 + width / 2),
+                x: bounds.x + bounds.width - total_scrollbar_width / 2.0
+                    + width / 2.0,
                 y: bounds.y,
-                width: width as f32,
+                width,
                 height: (bounds.height - x_scrollbar_height).max(0.0),
             };
 
@@ -1129,11 +1129,11 @@ impl Scrollbars {
             let scroller_offset = offset.y * ratio;
 
             let scroller_bounds = Rectangle {
-                x: bounds.x + bounds.width
-                    - f32::from(total_scrollbar_width / 2 + scroller_width / 2),
+                x: bounds.x + bounds.width - total_scrollbar_width / 2.0
+                    + scroller_width / 2.0,
                 y: (scrollbar_bounds.y + scroller_offset - x_scrollbar_height)
                     .max(0.0),
-                width: scroller_width as f32,
+                width: scroller_width,
                 height: scroller_height,
             };
 
@@ -1158,27 +1158,27 @@ impl Scrollbars {
             // Need to adjust the width of the horizontal scrollbar if the vertical scrollbar
             // is present
             let scrollbar_y_width = y_scrollbar.map_or(0.0, |_| {
-                (vertical.width.max(vertical.scroller_width) + vertical.margin)
-                    as f32
+                vertical.width.max(vertical.scroller_width) + vertical.margin
             });
 
-            let total_scrollbar_height = width.max(scroller_width) + 2 * margin;
+            let total_scrollbar_height =
+                width.max(scroller_width) + 2.0 * margin;
 
             // Total bounds of the scrollbar + margin + scroller width
             let total_scrollbar_bounds = Rectangle {
                 x: bounds.x,
-                y: bounds.y + bounds.height - total_scrollbar_height as f32,
+                y: bounds.y + bounds.height - total_scrollbar_height,
                 width: (bounds.width - scrollbar_y_width).max(0.0),
-                height: total_scrollbar_height as f32,
+                height: total_scrollbar_height,
             };
 
             // Bounds of just the scrollbar
             let scrollbar_bounds = Rectangle {
                 x: bounds.x,
-                y: bounds.y + bounds.height
-                    - f32::from(total_scrollbar_height / 2 + width / 2),
+                y: bounds.y + bounds.height - total_scrollbar_height / 2.0
+                    + width / 2.0,
                 width: (bounds.width - scrollbar_y_width).max(0.0),
-                height: width as f32,
+                height: width,
             };
 
             let ratio = bounds.width / content_bounds.width;
@@ -1189,12 +1189,11 @@ impl Scrollbars {
             let scroller_bounds = Rectangle {
                 x: (scrollbar_bounds.x + scroller_offset - scrollbar_y_width)
                     .max(0.0),
-                y: bounds.y + bounds.height
-                    - f32::from(
-                        total_scrollbar_height / 2 + scroller_width / 2,
-                    ),
+                y: bounds.y + bounds.height - total_scrollbar_height / 2.0
+                    + scroller_width / 2.0,
+
                 width: scroller_length,
-                height: scroller_width as f32,
+                height: scroller_width,
             };
 
             Some(Scrollbar {
diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index 87030a4d..854f71c3 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -54,7 +54,7 @@ where
     on_change: Box<dyn Fn(T) -> Message + 'a>,
     on_release: Option<Message>,
     width: Length,
-    height: u16,
+    height: f32,
     style: <Renderer::Theme as StyleSheet>::Style,
 }
 
@@ -66,7 +66,7 @@ where
     Renderer::Theme: StyleSheet,
 {
     /// The default height of a [`Slider`].
-    pub const DEFAULT_HEIGHT: u16 = 22;
+    pub const DEFAULT_HEIGHT: f32 = 22.0;
 
     /// Creates a new [`Slider`].
     ///
@@ -116,13 +116,13 @@ where
     }
 
     /// Sets the width of the [`Slider`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Slider`].
-    pub fn height(mut self, height: u16) -> Self {
+    pub fn height(mut self, height: f32) -> Self {
         self.height = height;
         self
     }
@@ -172,9 +172,7 @@ where
         _renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let limits =
-            limits.width(self.width).height(Length::Units(self.height));
-
+        let limits = limits.width(self.width).height(self.height);
         let size = limits.resolve(Size::ZERO);
 
         layout::Node::new(size)
diff --git a/native/src/widget/space.rs b/native/src/widget/space.rs
index 9f835893..a6fc977e 100644
--- a/native/src/widget/space.rs
+++ b/native/src/widget/space.rs
@@ -15,23 +15,26 @@ pub struct Space {
 
 impl Space {
     /// Creates an amount of empty [`Space`] with the given width and height.
-    pub fn new(width: Length, height: Length) -> Self {
-        Space { width, height }
+    pub fn new(width: impl Into<Length>, height: impl Into<Length>) -> Self {
+        Space {
+            width: width.into(),
+            height: height.into(),
+        }
     }
 
     /// Creates an amount of horizontal [`Space`].
-    pub fn with_width(width: Length) -> Self {
+    pub fn with_width(width: impl Into<Length>) -> Self {
         Space {
-            width,
+            width: width.into(),
             height: Length::Shrink,
         }
     }
 
     /// Creates an amount of vertical [`Space`].
-    pub fn with_height(height: Length) -> Self {
+    pub fn with_height(height: impl Into<Length>) -> Self {
         Space {
             width: Length::Shrink,
-            height,
+            height: height.into(),
         }
     }
 }
diff --git a/native/src/widget/svg.rs b/native/src/widget/svg.rs
index f83f5acf..f5ed0a6c 100644
--- a/native/src/widget/svg.rs
+++ b/native/src/widget/svg.rs
@@ -56,15 +56,15 @@ where
 
     /// Sets the width of the [`Svg`].
     #[must_use]
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Svg`].
     #[must_use]
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs
index be9e775e..bac1adcf 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -84,14 +84,14 @@ where
     }
 
     /// Sets the width of the [`Text`] boundaries.
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
     /// Sets the height of the [`Text`] boundaries.
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs
index 5bfc918c..d4ab3d8d 100644
--- a/native/src/widget/text_input.rs
+++ b/native/src/widget/text_input.rs
@@ -133,8 +133,8 @@ where
         self
     }
     /// Sets the width of the [`TextInput`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
@@ -387,11 +387,7 @@ where
     let text_size = size.unwrap_or_else(|| renderer.default_size());
 
     let padding = padding.fit(Size::ZERO, limits.max());
-
-    let limits = limits
-        .width(width)
-        .pad(padding)
-        .height(Length::Units(text_size));
+    let limits = limits.width(width).pad(padding).height(text_size);
 
     let mut text = layout::Node::new(limits.resolve(Size::ZERO));
     text.move_to(Point::new(padding.left.into(), padding.top.into()));
diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
index f0a944a3..13d0124d 100644
--- a/native/src/widget/toggler.rs
+++ b/native/src/widget/toggler.rs
@@ -38,7 +38,7 @@ where
     on_toggle: Box<dyn Fn(bool) -> Message + 'a>,
     label: Option<String>,
     width: Length,
-    size: u16,
+    size: f32,
     text_size: Option<u16>,
     text_alignment: alignment::Horizontal,
     spacing: u16,
@@ -52,7 +52,7 @@ where
     Renderer::Theme: StyleSheet,
 {
     /// The default size of a [`Toggler`].
-    pub const DEFAULT_SIZE: u16 = 20;
+    pub const DEFAULT_SIZE: f32 = 20.0;
 
     /// Creates a new [`Toggler`].
     ///
@@ -85,14 +85,14 @@ where
     }
 
     /// Sets the size of the [`Toggler`].
-    pub fn size(mut self, size: u16) -> Self {
+    pub fn size(mut self, size: f32) -> Self {
         self.size = size;
         self
     }
 
     /// Sets the width of the [`Toggler`].
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
         self
     }
 
@@ -169,11 +169,7 @@ where
             );
         }
 
-        row = row.push(
-            Row::new()
-                .width(Length::Units(2 * self.size))
-                .height(Length::Units(self.size)),
-        );
+        row = row.push(Row::new().width(2.0 * self.size).height(self.size));
 
         row.layout(renderer, limits)
     }
diff --git a/native/src/widget/vertical_slider.rs b/native/src/widget/vertical_slider.rs
index 28e8405c..7363b55f 100644
--- a/native/src/widget/vertical_slider.rs
+++ b/native/src/widget/vertical_slider.rs
@@ -47,7 +47,7 @@ where
     value: T,
     on_change: Box<dyn Fn(T) -> Message + 'a>,
     on_release: Option<Message>,
-    width: u16,
+    width: f32,
     height: Length,
     style: <Renderer::Theme as StyleSheet>::Style,
 }
@@ -60,7 +60,7 @@ where
     Renderer::Theme: StyleSheet,
 {
     /// The default width of a [`VerticalSlider`].
-    pub const DEFAULT_WIDTH: u16 = 22;
+    pub const DEFAULT_WIDTH: f32 = 22.0;
 
     /// Creates a new [`VerticalSlider`].
     ///
@@ -110,14 +110,14 @@ where
     }
 
     /// Sets the width of the [`VerticalSlider`].
-    pub fn width(mut self, width: u16) -> Self {
+    pub fn width(mut self, width: f32) -> Self {
         self.width = width;
         self
     }
 
     /// Sets the height of the [`VerticalSlider`].
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
         self
     }
 
@@ -166,9 +166,7 @@ where
         _renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let limits =
-            limits.width(Length::Units(self.width)).height(self.height);
-
+        let limits = limits.width(self.width).height(self.height);
         let size = limits.resolve(Size::ZERO);
 
         layout::Node::new(size)