Component IconButton

IconButton

A button that displays only an icon.

This is the preferred primitive for “close”, “more”, “settings” style actions where the icon is the only content.

Example

use gpui::px;
use yororen_ui::component::{icon, icon_button, IconName};

let close = icon_button(icon(IconName::Close).size(px(14.)))
    .on_click(|_ev, _window, _cx| {
        // ...
    });

When to use

• Small icon-only actions in toolbars and input affordances
• Close buttons inside overlays

API

• icon_button(icon): constructor
• id(...): stable identity
• clickable(bool)
• disabled(bool)
• variant(ActionVariantKind)
• on_click(...) / on_hover(...)
• bg(Hsla) / hover_bg(Hsla)
• icon_size(px(...)): size override for the provided icon

Defaults

• Size: 36x36
• Corner radius: rounded_md
• Default icon size: 14px (unless overridden)

Notes

• The button is focusable by default and uses a focus-visible border.

Example: Neutral icon affordance

use gpui::px;
use yororen_ui::component::{icon, icon_button, IconName};

let view = icon_button(icon(IconName::Close)).icon_size(px(12.));

Example: Variant

use yororen_ui::component::{icon, icon_button, IconName};
use yororen_ui::theme::ActionVariantKind;

let danger_close = icon_button(icon(IconName::Close)).variant(ActionVariantKind::Danger);