feat!(widget): rewrite button & icon widget APIs

src/widget/button/hyperlink.rs

@@ -0,0 +1,50 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+use super::Builder;
+use super::Style;
+use crate::widget::icon::{self, Handle};
+use iced_core::{font::Weight, widget::Id, Length, Padding};
+use std::borrow::Cow;
+
+pub type Button<'a, Message> = Builder<'a, Message, Hyperlink>;
+
+pub struct Hyperlink {
+    trailing_icon: bool,
+}
+
+pub fn hyperlink<'a, Message>() -> Button<'a, Message> {
+    Button::new(Hyperlink {
+        trailing_icon: false,
+    })
+}
+
+impl<'a, Message> Button<'a, Message> {
+    pub fn new(link: Hyperlink) -> Self {
+        Self {
+            id: Id::unique(),
+            label: Cow::Borrowed(""),
+            on_press: None,
+            width: Length::Shrink,
+            height: Length::Shrink,
+            padding: Padding::from(0),
+            spacing: 0,
+            icon_size: 16,
+            line_height: 20,
+            font_size: 14,
+            font_weight: Weight::Normal,
+            style: Style::Link,
+            variant: link,
+        }
+    }
+
+    pub const fn with_icon(mut self) -> Self {
+        self.variant.trailing_icon = true;
+        self
+    }
+}
+
+pub fn icon() -> Handle {
+    icon::handle::from_svg_bytes(&include_bytes!("../../../res/external-link.svg")[..])
+        .symbolic(true)
+}

src/widget/button/icon.rs

@@ -0,0 +1,179 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+use super::{button, Builder, Style};
+use crate::{widget::icon::Handle, Element};
+use apply::Apply;
+use iced_core::{font::Weight, text::LineHeight, widget::Id, Alignment, Length, Padding};
+use std::borrow::Cow;
+
+pub type Button<'a, Message> = Builder<'a, Message, Icon>;
+
+pub struct Icon {
+    handle: Handle,
+    selected: bool,
+    vertical: bool,
+}
+
+pub fn icon<Message>(handle: impl Into<Handle>) -> Button<'static, Message> {
+    Button::new(Icon {
+        handle: handle.into(),
+        selected: false,
+        vertical: false,
+    })
+}
+
+impl<'a, Message> Button<'a, Message> {
+    pub fn new(icon: Icon) -> Self {
+        crate::theme::THEME.with(|theme_cell| {
+            let theme = theme_cell.borrow();
+            let theme = theme.cosmic();
+            let padding = theme.space_xxs();
+
+            Self {
+                id: Id::unique(),
+                label: Cow::Borrowed(""),
+                on_press: None,
+                width: Length::Shrink,
+                height: Length::Fixed(46.0),
+                padding: Padding::from(padding),
+                spacing: theme.space_xxxs(),
+                icon_size: 16,
+                line_height: 20,
+                font_size: 14,
+                font_weight: Weight::Normal,
+                style: Style::Icon,
+                variant: icon,
+            }
+        })
+    }
+
+    /// Applies the **Extra Small** button size preset.
+    pub fn extra_small(mut self) -> Self {
+        crate::theme::THEME.with(|theme_cell| {
+            let theme = theme_cell.borrow();
+            let theme = theme.cosmic();
+
+            self.font_size = 14;
+            self.font_weight = Weight::Normal;
+            self.icon_size = 16;
+            self.line_height = 20;
+            self.height = Length::Fixed(36.0);
+            self.padding = Padding::from(theme.space_xxs());
+            self.spacing = theme.space_xxxs();
+        });
+
+        self
+    }
+
+    /// Applies the **Medium** button size preset.
+    pub fn medium(mut self) -> Self {
+        crate::theme::THEME.with(|theme_cell| {
+            let theme = theme_cell.borrow();
+            let theme = theme.cosmic();
+
+            self.font_size = 24;
+            self.font_weight = Weight::Normal;
+            self.icon_size = 32;
+            self.line_height = 32;
+            self.height = Length::Fixed(56.0);
+            self.padding = Padding::from(theme.space_xs());
+            self.spacing = theme.space_xxs();
+        });
+
+        self
+    }
+
+    /// Applies the **Large** button size preset.
+    pub fn large(mut self) -> Self {
+        crate::theme::THEME.with(|theme_cell| {
+            let theme = theme_cell.borrow();
+            let theme = theme.cosmic();
+
+            self.font_size = 28;
+            self.font_weight = Weight::Light;
+            self.icon_size = 40;
+            self.line_height = 36;
+            self.height = Length::Fixed(64.0);
+            self.padding = Padding::from(theme.space_xs());
+            self.spacing = theme.space_xxs();
+        });
+
+        self
+    }
+
+    /// Applies the **Extra Large** button size preset.
+    pub fn extra_large(mut self) -> Self {
+        crate::theme::THEME.with(|theme_cell| {
+            let theme = theme_cell.borrow();
+            let theme = theme.cosmic();
+            let padding = theme.space_xs();
+
+            self.font_size = 32;
+            self.font_weight = Weight::Light;
+            self.icon_size = 56;
+            self.line_height = 44;
+            self.height = Length::Fixed(80.0);
+            self.padding = Padding::from(padding);
+            self.spacing = theme.space_xxs();
+        });
+
+        self
+    }
+
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.variant.selected = selected;
+        self
+    }
+}
+
+impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Message> {
+    fn from(builder: Button<'a, Message>) -> Element<'a, Message> {
+        let mut content = Vec::with_capacity(2);
+
+        content.push(
+            crate::widget::icon(builder.variant.handle.clone())
+                .size(builder.icon_size)
+                .into(),
+        );
+
+        if !builder.label.is_empty() {
+            content.push(
+                crate::widget::text(builder.label)
+                    .size(builder.font_size)
+                    .line_height(LineHeight::Absolute(builder.line_height.into()))
+                    .font({
+                        let mut font = crate::font::DEFAULT;
+                        font.weight = builder.font_weight;
+                        font
+                    })
+                    .into(),
+            );
+        }
+
+        let button = if builder.variant.vertical {
+            crate::widget::column::with_children(content)
+                .padding(builder.padding)
+                .width(builder.width)
+                .height(builder.height)
+                .spacing(builder.spacing)
+                .align_items(Alignment::Center)
+                .apply(button)
+        } else {
+            crate::widget::row::with_children(content)
+                .padding(builder.padding)
+                .width(builder.width)
+                .height(builder.height)
+                .spacing(builder.spacing)
+                .align_items(Alignment::Center)
+                .apply(button)
+        };
+
+        button
+            .padding(0)
+            .id(builder.id)
+            .on_press_maybe(builder.on_press)
+            .style(builder.style)
+            .into()
+    }
+}

src/widget/button/mod.rs

@@ -0,0 +1,113 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+pub mod hyperlink;
+pub use hyperlink::Button as LinkButton;
+
+mod icon;
+pub use icon::icon;
+pub use icon::Button as IconButton;
+
+mod style;
+pub use style::{Appearance, StyleSheet};
+
+mod text;
+pub use text::Button as TextButton;
+pub use text::{destructive, standard, suggested, text};
+
+mod widget;
+pub use widget::{draw, focus, layout, mouse_interaction, Button};
+
+pub use crate::theme::Button as Style;
+use crate::Element;
+use iced_core::font::Weight;
+use iced_core::widget::Id;
+use iced_core::{Length, Padding};
+use std::borrow::Cow;
+
+pub fn button<'a, Message>(
+    content: impl Into<Element<'a, Message>>,
+) -> Button<'a, Message, crate::Renderer> {
+    Button::new(content)
+}
+
+#[must_use]
+pub struct Builder<'a, Message, Variant> {
+    id: Id,
+    label: Cow<'a, str>,
+    // tooltip: Cow<'a, str>,
+    on_press: Option<Message>,
+    width: Length,
+    height: Length,
+    padding: Padding,
+    spacing: u16,
+    icon_size: u16,
+    line_height: u16,
+    font_size: u16,
+    font_weight: Weight,
+    style: Style,
+    variant: Variant,
+}
+
+// /// A [`Button`] with an icon, which may be used in place of text.
+// pub const fn icon<'a>(selected: bool) -> Button<'a> {
+//     Builder::new(Standard::Icon { selected })
+// }
+
+impl<'a, Message, Variant> Builder<'a, Message, Variant> {
+    /// Sets the [`Id`] of the [`Button`].
+    pub fn id(mut self, id: Id) -> Self {
+        self.id = id;
+        self
+    }
+
+    pub fn label(mut self, label: impl Into<Cow<'a, str>>) -> Self {
+        self.label = label.into();
+        self
+    }
+
+    /// Sets the width of the [`Button`].
+    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: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`Button`].
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
+    /// Sets the message that will be produced when the [`Button`] is pressed.
+    ///
+    /// Unless `on_press` is called, the [`Button`] will be disabled.
+    pub fn on_press(mut self, on_press: Message) -> Self {
+        self.on_press = Some(on_press);
+        self
+    }
+
+    /// Sets the message that will be produced when the [`Button`] is pressed,
+    /// if `Some`.
+    ///
+    /// If `None`, the [`Button`] will be disabled.
+    pub fn on_press_maybe(mut self, on_press: Option<Message>) -> Self {
+        self.on_press = on_press;
+        self
+    }
+
+    pub fn style(mut self, style: Style) -> Self {
+        self.style = style;
+        self
+    }
+
+    pub fn tooltip(mut self, label: impl Into<Cow<'a, str>>) -> Self {
+        self.label = label.into();
+        self
+    }
+}

src/widget/button/style.rs

@@ -0,0 +1,90 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+//! Change the apperance of a button.
+use iced_core::{Background, BorderRadius, Color, Vector};
+
+/// The appearance of a button.
+#[must_use]
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The amount of offset to apply to the shadow of the button.
+    pub shadow_offset: Vector,
+
+    /// The [`Background`] of the button.
+    pub background: Option<Background>,
+
+    /// The border radius of the button.
+    pub border_radius: BorderRadius,
+
+    /// The border width of the button.
+    pub border_width: f32,
+
+    /// The border [`Color`] of the button.
+    pub border_color: Color,
+
+    /// Opacity of the button.
+    pub opacity: f32,
+
+    /// An outline placed around the border.
+    pub outline_width: f32,
+
+    /// The [`Color`] of the outline.
+    pub outline_color: Color,
+
+    /// The icon [`Color`] of the button.
+    pub icon_color: Option<Color>,
+
+    /// The text [`Color`] of the button.
+    pub text_color: Color,
+}
+
+impl Appearance {
+    // TODO: `BorderRadius` is not `const fn` compatible.
+    pub fn new() -> Self {
+        Self {
+            shadow_offset: Vector::new(0.0, 0.0),
+            background: None,
+            border_radius: BorderRadius::from(0.0),
+            border_width: 0.0,
+            border_color: Color::TRANSPARENT,
+            opacity: 1.0,
+            outline_width: 0.0,
+            outline_color: Color::TRANSPARENT,
+            icon_color: None,
+            text_color: Color::BLACK,
+        }
+    }
+}
+
+impl std::default::Default for Appearance {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// A set of rules that dictate the style of a button.
+pub trait StyleSheet {
+    /// The supported style of the [`StyleSheet`].
+    type Style: Default;
+
+    /// Produces the active [`Appearance`] of a button.
+    fn active(&self, focused: bool, style: &Self::Style) -> Appearance;
+
+    /// Produces the disabled [`Appearance`] of a button.
+    fn disabled(&self, style: &Self::Style) -> Appearance;
+
+    /// [`Appearance`] when the button is the target of a DND operation.
+    fn drop_target(&self, style: &Self::Style) -> Appearance {
+        self.hovered(false, style)
+    }
+
+    /// Produces the hovered [`Appearance`] of a button.
+    fn hovered(&self, focused: bool, style: &Self::Style) -> Appearance;
+
+    /// Produces the pressed [`Appearance`] of a button.
+    fn pressed(&self, focused: bool, style: &Self::Style) -> Appearance;
+
+    /// [`Appearance`] when a button is selected.
+    fn selected(&self, focused: bool, style: &Self::Style) -> Appearance;
+}

src/widget/button/text.rs

@@ -0,0 +1,123 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+use super::{button, Builder, Style};
+use crate::widget::{self, icon::Handle, row};
+use crate::{ext::CollectionWidget, Element};
+use apply::Apply;
+use iced_core::{font::Weight, text::LineHeight, widget::Id, Alignment, Length, Padding};
+use std::borrow::Cow;
+
+/// A [`Button`] with the highest level of attention.
+///
+/// There should only be one primary button used per page.
+pub type Button<'a, Message> = Builder<'a, Message, Text>;
+
+pub fn destructive<'a, Message>(label: impl Into<Cow<'a, str>>) -> Button<'a, Message> {
+    Button::new(Text::new())
+        .label(label)
+        .style(Style::Destructive)
+}
+
+pub fn suggested<'a, Message>(label: impl Into<Cow<'a, str>>) -> Button<'a, Message> {
+    Button::new(Text::new())
+        .label(label)
+        .style(Style::Suggested)
+}
+
+pub fn standard<'a, Message>(label: impl Into<Cow<'a, str>>) -> Button<'a, Message> {
+    Button::new(Text::new()).label(label)
+}
+
+pub fn text<'a, Message>(label: impl Into<Cow<'a, str>>) -> Button<'a, Message> {
+    Button::new(Text::new()).label(label).style(Style::Text)
+}
+
+pub struct Text {
+    pub(super) leading_icon: Option<crate::widget::icon::Handle>,
+    pub(super) trailing_icon: Option<crate::widget::icon::Handle>,
+}
+
+impl Text {
+    pub const fn new() -> Self {
+        Self {
+            leading_icon: None,
+            trailing_icon: None,
+        }
+    }
+}
+
+impl<'a, Message> Button<'a, Message> {
+    pub fn new(text: Text) -> Self {
+        crate::theme::THEME.with(|theme_cell| {
+            let theme = theme_cell.borrow();
+            let theme = theme.cosmic();
+            Self {
+                id: Id::unique(),
+                label: Cow::Borrowed(""),
+                on_press: None,
+                width: Length::Shrink,
+                height: Length::Fixed(theme.space_l().into()),
+                padding: Padding::from([0, theme.space_s()]),
+                spacing: theme.space_xxxs(),
+                icon_size: 16,
+                line_height: 20,
+                font_size: 14,
+                font_weight: Weight::Normal,
+                style: Style::Standard,
+                variant: text,
+            }
+        })
+    }
+
+    pub fn leading_icon(mut self, icon: impl Into<Handle>) -> Self {
+        self.variant.leading_icon = Some(icon.into());
+        self
+    }
+
+    pub fn trailing_icon(mut self, icon: impl Into<Handle>) -> Self {
+        self.variant.trailing_icon = Some(icon.into());
+        self
+    }
+}
+
+impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Message> {
+    fn from(mut b: Button<'a, Message>) -> Element<'a, Message> {
+        // TODO: Determine why this needs to be set before the label to prevent lifetime conflict.
+        let trailing_icon = b
+            .variant
+            .trailing_icon
+            .map(|i| Element::from(widget::icon(i).size(b.icon_size)));
+
+        row::with_capacity(3)
+            // Optional icon to place before label.
+            .push_maybe(
+                b.variant
+                    .leading_icon
+                    .map(|i| widget::icon(i).size(b.icon_size)),
+            )
+            // Optional label between icons.
+            .push_maybe((!b.label.is_empty()).then(|| {
+                let mut font = crate::font::DEFAULT;
+                font.weight = b.font_weight;
+
+                crate::widget::text(b.label)
+                    .size(b.font_size)
+                    .line_height(LineHeight::Absolute(b.line_height.into()))
+                    .font(font)
+            }))
+            // Optional icon to place behind the label.
+            .push_maybe(trailing_icon)
+            .padding(b.padding)
+            .width(b.width)
+            .height(b.height)
+            .spacing(b.spacing)
+            .align_items(Alignment::Center)
+            .apply(button)
+            .padding(0)
+            .id(b.id)
+            .on_press_maybe(b.on_press.take())
+            .style(b.style)
+            .into()
+    }
+}

src/widget/button/widget.rs

@@ -0,0 +1,677 @@
+// Copyright 2019 H<>ctor Ram<61>n, Iced contributors
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MIT
+
+//! Allow your users to perform actions by pressing a button.
+//!
+//! A [`Button`] has some local [`State`].
+use iced_runtime::core::widget::Id;
+use iced_runtime::{keyboard, Command};
+
+use iced_core::event::{self, Event};
+use iced_core::layout;
+use iced_core::mouse;
+use iced_core::overlay;
+use iced_core::renderer;
+use iced_core::touch;
+use iced_core::widget::tree::{self, Tree};
+use iced_core::widget::Operation;
+use iced_core::{
+    Background, Clipboard, Color, Element, Layout, Length, Padding, Point, Rectangle, Shell,
+    Vector, Widget,
+};
+use iced_renderer::core::widget::{operation, OperationOutputWrapper};
+
+pub use super::style::{Appearance, StyleSheet};
+
+/// A generic widget that produces a message when pressed.
+///
+/// ```no_run
+/// # type Button<'a, Message> =
+/// #     iced_widget::Button<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #
+/// #[derive(Clone)]
+/// enum Message {
+///     ButtonPressed,
+/// }
+///
+/// let button = Button::new("Press me!").on_press(Message::ButtonPressed);
+/// ```
+///
+/// If a [`Button::on_press`] handler is not set, the resulting [`Button`] will
+/// be disabled:
+///
+/// ```
+/// # type Button<'a, Message> =
+/// #     iced_widget::Button<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #
+/// #[derive(Clone)]
+/// enum Message {
+///     ButtonPressed,
+/// }
+///
+/// fn disabled_button<'a>() -> Button<'a, Message> {
+///     Button::new("I'm disabled!")
+/// }
+///
+/// fn enabled_button<'a>() -> Button<'a, Message> {
+///     disabled_button().on_press(Message::ButtonPressed)
+/// }
+/// ```
+#[allow(missing_debug_implementations)]
+#[must_use]
+pub struct Button<'a, Message, Renderer>
+where
+    Renderer: iced_core::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    id: Id,
+    #[cfg(feature = "a11y")]
+    name: Option<Cow<'a, str>>,
+    #[cfg(feature = "a11y")]
+    description: Option<iced_accessibility::Description<'a>>,
+    #[cfg(feature = "a11y")]
+    label: Option<Vec<iced_accessibility::accesskit::NodeId>>,
+    content: Element<'a, Message, Renderer>,
+    on_press: Option<Message>,
+    width: Length,
+    height: Length,
+    padding: Padding,
+    style: <Renderer::Theme as StyleSheet>::Style,
+}
+
+impl<'a, Message, Renderer> Button<'a, Message, Renderer>
+where
+    Renderer: iced_core::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    /// Creates a new [`Button`] with the given content.
+    pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
+        Button {
+            id: Id::unique(),
+            #[cfg(feature = "a11y")]
+            name: None,
+            #[cfg(feature = "a11y")]
+            description: None,
+            #[cfg(feature = "a11y")]
+            label: None,
+            content: content.into(),
+            on_press: None,
+            width: Length::Shrink,
+            height: Length::Shrink,
+            padding: Padding::new(5.0),
+            style: <Renderer::Theme as StyleSheet>::Style::default(),
+        }
+    }
+
+    /// Sets the width of the [`Button`].
+    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: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`Button`].
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
+    /// Sets the message that will be produced when the [`Button`] is pressed.
+    ///
+    /// Unless `on_press` is called, the [`Button`] will be disabled.
+    pub fn on_press(mut self, on_press: Message) -> Self {
+        self.on_press = Some(on_press);
+        self
+    }
+
+    /// Sets the message that will be produced when the [`Button`] is pressed,
+    /// if `Some`.
+    ///
+    /// If `None`, the [`Button`] will be disabled.
+    pub fn on_press_maybe(mut self, on_press: Option<Message>) -> Self {
+        self.on_press = on_press;
+        self
+    }
+
+    /// Sets the style variant of this [`Button`].
+    pub fn style(mut self, style: <Renderer::Theme as StyleSheet>::Style) -> Self {
+        self.style = style;
+        self
+    }
+
+    /// Sets the [`Id`] of the [`Button`].
+    pub fn id(mut self, id: Id) -> Self {
+        self.id = id;
+        self
+    }
+
+    #[cfg(feature = "a11y")]
+    /// Sets the name of the [`Button`].
+    pub fn name(mut self, name: impl Into<Cow<'a, str>>) -> Self {
+        self.name = Some(name.into());
+        self
+    }
+
+    #[cfg(feature = "a11y")]
+    /// Sets the description of the [`Button`].
+    pub fn description_widget<T: iced_accessibility::Describes>(mut self, description: &T) -> Self {
+        self.description = Some(iced_accessibility::Description::Id(
+            description.description(),
+        ));
+        self
+    }
+
+    #[cfg(feature = "a11y")]
+    /// Sets the description of the [`Button`].
+    pub fn description(mut self, description: impl Into<Cow<'a, str>>) -> Self {
+        self.description = Some(iced_accessibility::Description::Text(description.into()));
+        self
+    }
+
+    #[cfg(feature = "a11y")]
+    /// Sets the label of the [`Button`].
+    pub fn label(mut self, label: &dyn iced_accessibility::Labels) -> Self {
+        self.label = Some(label.label().into_iter().map(|l| l.into()).collect());
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for Button<'a, Message, Renderer>
+where
+    Message: 'a + Clone,
+    Renderer: 'a + iced_core::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<State>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(State::new())
+    }
+
+    fn children(&self) -> Vec<Tree> {
+        vec![Tree::new(&self.content)]
+    }
+
+    fn diff(&mut self, tree: &mut Tree) {
+        tree.diff_children(std::slice::from_mut(&mut self.content));
+    }
+
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(&self, renderer: &Renderer, limits: &layout::Limits) -> layout::Node {
+        layout(
+            renderer,
+            limits,
+            self.width,
+            self.height,
+            self.padding,
+            |renderer, limits| self.content.as_widget().layout(renderer, limits),
+        )
+    }
+
+    fn operate(
+        &self,
+        tree: &mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
+    ) {
+        operation.container(None, layout.bounds(), &mut |operation| {
+            self.content.as_widget().operate(
+                &mut tree.children[0],
+                layout.children().next().unwrap(),
+                renderer,
+                operation,
+            );
+        });
+        let state = tree.state.downcast_mut::<State>();
+        operation.focusable(state, Some(&self.id));
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        viewport: &Rectangle,
+    ) -> event::Status {
+        if let event::Status::Captured = self.content.as_widget_mut().on_event(
+            &mut tree.children[0],
+            event.clone(),
+            layout.children().next().unwrap(),
+            cursor,
+            renderer,
+            clipboard,
+            shell,
+            viewport,
+        ) {
+            return event::Status::Captured;
+        }
+
+        update(
+            self.id.clone(),
+            event,
+            layout,
+            cursor,
+            shell,
+            &self.on_press,
+            || tree.state.downcast_mut::<State>(),
+        )
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        renderer_style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+    ) {
+        let bounds = layout.bounds();
+        let content_layout = layout.children().next().unwrap();
+
+        let styling = draw(
+            renderer,
+            bounds,
+            cursor,
+            self.on_press.is_some(),
+            theme,
+            &self.style,
+            || tree.state.downcast_ref::<State>(),
+        );
+
+        self.content.as_widget().draw(
+            &tree.children[0],
+            renderer,
+            theme,
+            &renderer::Style {
+                icon_color: styling.icon_color.unwrap_or(renderer_style.icon_color),
+                text_color: styling.text_color,
+                scale_factor: renderer_style.scale_factor,
+            },
+            content_layout,
+            cursor,
+            &bounds,
+        );
+    }
+
+    fn mouse_interaction(
+        &self,
+        _tree: &Tree,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+        _renderer: &Renderer,
+    ) -> mouse::Interaction {
+        mouse_interaction(layout, cursor, self.on_press.is_some())
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+        self.content.as_widget_mut().overlay(
+            &mut tree.children[0],
+            layout.children().next().unwrap(),
+            renderer,
+        )
+    }
+
+    #[cfg(feature = "a11y")]
+    /// get the a11y nodes for the widget
+    fn a11y_nodes(
+        &self,
+        layout: Layout<'_>,
+        state: &Tree,
+        p: mouse::Cursor,
+    ) -> iced_accessibility::A11yTree {
+        use iced_accessibility::{
+            accesskit::{Action, DefaultActionVerb, NodeBuilder, NodeId, Rect, Role},
+            A11yNode, A11yTree,
+        };
+
+        let child_layout = layout.children().next().unwrap();
+        let child_tree = &state.children[0];
+        let child_tree = self
+            .content
+            .as_widget()
+            .a11y_nodes(child_layout, &child_tree, p);
+
+        let Rectangle {
+            x,
+            y,
+            width,
+            height,
+        } = layout.bounds();
+        let bounds = Rect::new(x as f64, y as f64, (x + width) as f64, (y + height) as f64);
+        let is_hovered = state.state.downcast_ref::<State>().is_hovered;
+
+        let mut node = NodeBuilder::new(Role::Button);
+        node.add_action(Action::Focus);
+        node.add_action(Action::Default);
+        node.set_bounds(bounds);
+        if let Some(name) = self.name.as_ref() {
+            node.set_name(name.clone());
+        }
+        match self.description.as_ref() {
+            Some(iced_accessibility::Description::Id(id)) => {
+                node.set_described_by(
+                    id.iter()
+                        .cloned()
+                        .map(|id| NodeId::from(id))
+                        .collect::<Vec<_>>(),
+                );
+            }
+            Some(iced_accessibility::Description::Text(text)) => {
+                node.set_description(text.clone());
+            }
+            None => {}
+        }
+
+        if let Some(label) = self.label.as_ref() {
+            node.set_labelled_by(label.clone());
+        }
+
+        if self.on_press.is_none() {
+            node.set_disabled()
+        }
+        if is_hovered {
+            node.set_hovered()
+        }
+        node.set_default_action_verb(DefaultActionVerb::Click);
+
+        A11yTree::node_with_child_tree(A11yNode::new(node, self.id.clone()), child_tree)
+    }
+
+    fn id(&self) -> Option<Id> {
+        Some(self.id.clone())
+    }
+
+    fn set_id(&mut self, id: Id) {
+        self.id = id;
+    }
+}
+
+impl<'a, Message, Renderer> From<Button<'a, Message, Renderer>> for Element<'a, Message, Renderer>
+where
+    Message: Clone + 'a,
+    Renderer: iced_core::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
+{
+    fn from(button: Button<'a, Message, Renderer>) -> Self {
+        Self::new(button)
+    }
+}
+
+/// The local state of a [`Button`].
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct State {
+    is_hovered: bool,
+    is_pressed: bool,
+    is_focused: bool,
+}
+
+impl State {
+    /// Creates a new [`State`].
+    pub fn new() -> State {
+        State::default()
+    }
+
+    /// Returns whether the [`Button`] is currently focused or not.
+    pub fn is_focused(self) -> bool {
+        self.is_focused
+    }
+
+    /// Returns whether the [`Button`] is currently hovered or not.
+    pub fn is_hovered(self) -> bool {
+        self.is_hovered
+    }
+
+    /// Focuses the [`Button`].
+    pub fn focus(&mut self) {
+        self.is_focused = true;
+    }
+
+    /// Unfocuses the [`Button`].
+    pub fn unfocus(&mut self) {
+        self.is_focused = false;
+    }
+}
+
+/// Processes the given [`Event`] and updates the [`State`] of a [`Button`]
+/// accordingly.
+#[allow(clippy::needless_pass_by_value)]
+pub fn update<'a, Message: Clone>(
+    _id: Id,
+    event: Event,
+    layout: Layout<'_>,
+    cursor: mouse::Cursor,
+    shell: &mut Shell<'_, Message>,
+    on_press: &Option<Message>,
+    state: impl FnOnce() -> &'a mut State,
+) -> event::Status {
+    match event {
+        Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
+        | Event::Touch(touch::Event::FingerPressed { .. }) => {
+            if on_press.is_some() {
+                let bounds = layout.bounds();
+
+                if cursor.is_over(bounds) {
+                    let state = state();
+
+                    state.is_pressed = true;
+
+                    return event::Status::Captured;
+                }
+            }
+        }
+        Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left))
+        | Event::Touch(touch::Event::FingerLifted { .. }) => {
+            if let Some(on_press) = on_press.clone() {
+                let state = state();
+
+                if state.is_pressed {
+                    state.is_pressed = false;
+
+                    let bounds = layout.bounds();
+
+                    if cursor.is_over(bounds) {
+                        shell.publish(on_press);
+                    }
+
+                    return event::Status::Captured;
+                }
+            }
+        }
+        #[cfg(feature = "a11y")]
+        Event::A11y(event_id, iced_accessibility::accesskit::ActionRequest { action, .. }) => {
+            let state = state();
+            if let Some(Some(on_press)) = (id == event_id
+                && matches!(action, iced_accessibility::accesskit::Action::Default))
+            .then(|| on_press.clone())
+            {
+                state.is_pressed = false;
+                shell.publish(on_press);
+            }
+            return event::Status::Captured;
+        }
+        Event::Keyboard(keyboard::Event::KeyPressed { key_code, .. }) => {
+            if let Some(on_press) = on_press.clone() {
+                let state = state();
+                if state.is_focused && key_code == keyboard::KeyCode::Enter {
+                    state.is_pressed = true;
+                    shell.publish(on_press);
+                    return event::Status::Captured;
+                }
+            }
+        }
+        Event::Touch(touch::Event::FingerLost { .. }) | Event::Mouse(mouse::Event::CursorLeft) => {
+            let state = state();
+            state.is_hovered = false;
+            state.is_pressed = false;
+        }
+        _ => {}
+    }
+
+    event::Status::Ignored
+}
+
+/// Draws a [`Button`].
+pub fn draw<'a, Renderer: iced_core::Renderer>(
+    renderer: &mut Renderer,
+    bounds: Rectangle,
+    cursor: mouse::Cursor,
+    is_enabled: bool,
+    style_sheet: &dyn StyleSheet<Style = <Renderer::Theme as StyleSheet>::Style>,
+    style: &<Renderer::Theme as StyleSheet>::Style,
+    state: impl FnOnce() -> &'a State,
+) -> Appearance
+where
+    Renderer::Theme: StyleSheet,
+{
+    let is_mouse_over = cursor.position().is_some_and(|p| bounds.contains(p));
+
+    let state: &State = state();
+
+    let styling = if !is_enabled {
+        style_sheet.disabled(style)
+    } else if is_mouse_over {
+        if state.is_pressed {
+            style_sheet.pressed(state.is_focused, style)
+        } else {
+            style_sheet.hovered(state.is_focused, style)
+        }
+    } else {
+        style_sheet.active(state.is_focused, style)
+    };
+
+    let doubled_border_width = styling.border_width * 2.0;
+    let doubled_outline_width = styling.outline_width * 2.0;
+
+    if styling.outline_width > 0.0 {
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle {
+                    x: bounds.x - styling.border_width - styling.outline_width,
+                    y: bounds.y - styling.border_width - styling.outline_width,
+                    width: bounds.width + doubled_border_width + doubled_outline_width,
+                    height: bounds.height + doubled_border_width + doubled_outline_width,
+                },
+                border_radius: styling.border_radius,
+                border_width: styling.outline_width,
+                border_color: styling.outline_color,
+            },
+            Color::TRANSPARENT,
+        );
+    }
+
+    if styling.background.is_some() || styling.border_width > 0.0 {
+        if styling.shadow_offset != Vector::default() {
+            // TODO: Implement proper shadow support
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: bounds.x + styling.shadow_offset.x,
+                        y: bounds.y + styling.shadow_offset.y,
+                        ..bounds
+                    },
+                    border_radius: styling.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                Background::Color([0.0, 0.0, 0.0, 0.5].into()),
+            );
+        }
+
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_radius: styling.border_radius,
+                border_width: styling.border_width,
+                border_color: styling.border_color,
+            },
+            styling
+                .background
+                .unwrap_or(Background::Color(Color::TRANSPARENT)),
+        );
+    }
+
+    styling
+}
+
+/// Computes the layout of a [`Button`].
+pub fn layout<Renderer>(
+    renderer: &Renderer,
+    limits: &layout::Limits,
+    width: Length,
+    height: Length,
+    padding: Padding,
+    layout_content: impl FnOnce(&Renderer, &layout::Limits) -> layout::Node,
+) -> layout::Node {
+    let limits = limits.width(width).height(height);
+
+    let mut content = layout_content(renderer, &limits.pad(padding));
+    let padding = padding.fit(content.size(), limits.max());
+    let size = limits.pad(padding).resolve(content.size()).pad(padding);
+
+    content.move_to(Point::new(padding.left, padding.top));
+
+    layout::Node::with_children(size, vec![content])
+}
+
+/// Returns the [`mouse::Interaction`] of a [`Button`].
+#[must_use]
+pub fn mouse_interaction(
+    layout: Layout<'_>,
+    cursor: mouse::Cursor,
+    is_enabled: bool,
+) -> mouse::Interaction {
+    let is_mouse_over = cursor.is_over(layout.bounds());
+
+    if is_mouse_over && is_enabled {
+        mouse::Interaction::Pointer
+    } else {
+        mouse::Interaction::default()
+    }
+}
+
+/// Produces a [`Command`] that focuses the [`Button`] with the given [`Id`].
+pub fn focus<Message: 'static>(id: Id) -> Command<Message> {
+    Command::widget(operation::focusable::focus(id))
+}
+
+impl operation::Focusable for State {
+    fn is_focused(&self) -> bool {
+        State::is_focused(*self)
+    }
+
+    fn focus(&mut self) {
+        State::focus(self);
+    }
+
+    fn unfocus(&mut self) {
+        State::unfocus(self);
+    }
+}