Preview
Loading GPUI
Props
Install
cargo add evilbuttonsUsage
use evilbuttons::ChromeButton;
use gpui::{div, prelude::*, Context, IntoElement, Render, Window};
struct ButtonDemo;
impl Render for ButtonDemo {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
div().child(ChromeButton::new("continue").on_click(|_, _, _| println!("Continue")))
}
}Props
ChromeButton is a GPUI RenderOnce builder; its animation state is keyed by id. It also implements ParentElement, so .child(...) replaces the label with your own face content (label and icons).
| Method | Type | Default | Description |
|---|---|---|---|
new(id) | impl Into<ElementId> | - | Unique id for the button's state. |
label(s) | impl Into<SharedString> | "Continue" | Label used when no children are provided. |
tone(t) | ChromeButtonTone | Auto | Auto follows the window's light or dark appearance: white face when light, dark face when dark. Dark and Light force one. |
size(s) | ChromeButtonSize | Default | Default pill, Sm compact pill, or a round Icon button. |
speed(f) | f32 | 1.0 | Speed multiplier for the metal flowing around the ring. |
interactive(bool) | bool | true | Swirl the metal around the pointer and speed it up on hover, and send a shock front through it on press. |
on_click(f) | Fn(&ClickEvent, &mut Window, &mut App) | - | Fired on click, and on Space/Enter while focused. |
disabled(bool) | bool | false | Dims the button and ignores input. |
Good to know
- No WebGL here: GPUI has no custom shaders, so the original fragment shader is evaluated on the CPU at points around the ring every frame and painted as thin segments. Same flow, swirl and shock wave, without per-pixel supersampling.
- Keeps animating while it's on screen, like the original.
Autoreads the window appearance. If your app has its own theme switch, passDarkorLightexplicitly.