Preview
Loading GPUI
Props
Install
cargo add evilbuttonsUsage
use evilbuttons::FrameButton;
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(FrameButton::new("start", "Get Started").on_click(|_, _, _| start()))
}
}Variants
Secondary
Fills in with the foreground color on hover.
Loading GPUI
FrameButton::new("start", "Get Started").variant(FrameButtonVariant::Secondary)Outline
Loading GPUI
FrameButton::new("start", "Get Started").variant(FrameButtonVariant::Outline)Glow
Loading GPUI
FrameButton::new("engage", "Engage")
.variant(FrameButtonVariant::Outline)
.glow(true)
.hover_offset(8.0)Props
FrameButton 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 label (shown uppercase). |
variant(v) | FrameButtonVariant | Default | Default, Secondary or Outline. |
glow(bool) | bool | false | Blooms a soft glow behind the button on hover. |
marker_size(px) | f32 | 14 | Corner marker size in px. |
offset(px) | f32 | 6 | Distance in px the markers sit outside the button's edge. |
hover_offset(px) | f32 | 5 | How far in px the markers spread on hover. |
dark(bool) | bool | window appearance | Use the dark theme colours for the markers and the secondary/outline variants. |
font_family(family) | impl Into<SharedString> | inherited | Font family for the label. |
on_click(f) | Fn(&ClickEvent, &mut Window, &mut App) | - | Fired on click. |
disabled(bool) | bool | false | Dims the button and ignores input. |
Good to know
- Markers are painted bars, not icons, so they stay crisp at any size.
- Focus keeps the hover pose (markers spread), like the original's
whileFocus. - GPUI has no
letter-spacing, so the 0.22em tracking is laid out glyph by glyph. - The glow follows the original's intent and blooms on hover. On the live React docs it only shows while pressed, because there the
-z-10glow slips behind the preview card until the pressscalecreates a stacking context.