Preview
Loading GPUI
Variants
Rounded pill
Loading GPUI
DitherButton::new("press-start", "Press Start")
.colors(rgb(0x10b981), background)
.radius(9999.0)
.padding(40.0, 12.0)
.letter_spacing(0.1)
.dither_color(rgb(0x10b981))
.dither_opacity(0.5)Hot pink
Loading GPUI
DitherButton::new("synthwave", "Synthwave")
.colors(rgb(0xf472b6), rgb(0x1e1b4b))
.radius(0.0)
.dither_color(rgb(0xf472b6))
.dither_opacity(0.5)Tiny chip
Loading GPUI
DitherButton::new("version", "v0.1.0")
.border_width(1.0)
.padding(12.0, 4.0)
.text_size(12.0, 16.0)Chunky dither
Loading GPUI
DitherButton::new("boss", "Boss Mode").dither_size(10.0)Fine dither
Loading GPUI
DitherButton::new("hi-res", "Hi-Res")
.dither_size(2.0)
.dither_opacity(0.7)Install
cargo add evilbuttonsUsage
use evilbuttons::DitherButton;
use gpui::{div, prelude::*, rgb, Context, IntoElement, Render, Window};
struct ButtonDemo;
impl Render for ButtonDemo {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
div().child(
DitherButton::new("launch", "Launch")
.colors(rgb(0xfafafa), rgb(0x0a0a0a))
.font_family("Geist Mono"),
)
}
}Props
DitherButton is a GPUI RenderOnce builder; its animation clock is keyed by id.
| Method | Type | Default | Description |
|---|---|---|---|
new(id, label) | impl Into<ElementId>, impl Into<SharedString> | - | Unique id and the label (shown uppercase). |
dither_color(c) | impl Into<Hsla> | #999999 | Color of the dither's "on" pixels. |
dither_background(c) | impl Into<Hsla> | #000000 | Color of the dither's "off" pixels. |
dither_opacity(o) | f32 (0–1) | 1.0 | Opacity of the whole dither layer. |
dither_size(px) | f32 (1–32) | 4.0 | Pixel scale of the dither particles. Higher = chunkier blocks. |
colors(fg, bg) | impl Into<Hsla>, impl Into<Hsla> | #fafafa, #0a0a0a | Text/border color and button background. Pass your page's foreground and background. |
knockout(c) | impl Into<Hsla> | button background | Color of the outline that knocks the label out of the dither (the page background in the original). |
border_width(px) | f32 | 2.0 | Border width. |
radius(px) | f32 | 6.0 | Corner radius; a large value makes a pill. |
padding(x, y) | f32, f32 | 28.0, 12.0 | Horizontal and vertical padding. |
text_size(size, line_height) | f32, f32 | 14.0, 20.0 | Font size and line height. |
letter_spacing(em) | f32 | 0.05 | Letter spacing in em. |
font_family(name) | impl Into<SharedString> | inherited | Label font, e.g. your monospace font. |
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
- The dither is painted as merged runs of quads every frame, with the same 4×4 Bayer thresholds and wave as the original canvas.
- The original canvas resolves its transparent
background-colorto black, so "off" pixels are black in both themes;dither_backgroundchanges that. - GPUI has no theme-aware CSS colors, so pass your foreground and background with
colorsandknockout.