Preview
Loading GPUI
Props
Install
cargo add evilbuttonsUsage
use evilbuttons::{HighlightButton, HighlightButtonVariant};
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(
HighlightButton::new("click", "Click Me")
.variant(HighlightButtonVariant::Outline)
.on_click(|_, _, _| println!("clicked")),
)
}
}Variants
Secondary
A flat, muted fill.
Loading GPUI
HighlightButton::new("click", "Click Me").variant(HighlightButtonVariant::Secondary)Outline
The page background with a hairline border.
Loading GPUI
HighlightButton::new("outline", "Outline").variant(HighlightButtonVariant::Outline)Custom colors
Any color works for the spotlight and the border.
Loading GPUI
HighlightButton::new("blue", "Blue Glow")
.variant(HighlightButtonVariant::Outline)
.highlight_color(rgba(0x3b82f64d))
.border_color(rgb(0x3b82f6))Props
HighlightButton is a GPUI RenderOnce builder; its state is keyed by id.
| Method | Type | Default | Description |
|---|---|---|---|
new(id, label) | impl Into<ElementId>, impl Into<SharedString> | - | Unique id and the button label. |
variant(v) | HighlightButtonVariant | Default | Surface style: Default, Secondary or Outline. |
highlight_color(c) | impl Into<Hsla> | text color at 28% | Color of the cursor spotlight and click ripple. |
highlight_size(px) | f32 | 90.0 | Radius in px of the cursor spotlight. |
border_color(c) | impl Into<Hsla> | text color at 75% | Color the border lights up with near the cursor. |
dark(bool) | bool | window appearance | Use the dark-theme colors for the secondary and outline surfaces. |
on_click(f) | Fn(&ClickEvent, &mut Window, &mut App) | - | Fired when the button is clicked. |
disabled(bool) | bool | false | Dims the button and ignores input. |
Good to know
- Pointer moves only repaint the button.
- The lit border follows the button's radius.
- Keyboard clicks ripple from the center.
- GPUI has no radial gradients, so the spotlight is a stack of clipped discs that follows the same linear falloff.