Button

1<AppButton glyph="compass" tone="deep-space">Explore</AppButton>2<AppButton tone="sodium-airglow" variant="outline">Details</AppButton>

1/** Button. Filled is the default; glass and outline are quieter. */2export function AppButton({3  glyph,4  tone = "deep-space",5  variant = "filled",6  size,7  disabled,8  children,9}: {10  glyph?: GlyphName;11  tone?: TileTone;12  variant?: ButtonVariant;13  size?: "sm";14  disabled?: boolean;15  children: string;16}) {17  const cls = ["app-ui app-button", variant !== "filled" && `is-${variant}`, size && `is-${size}`].filter(Boolean).join(" ");18  return (19    <button type="button" className={cls} style={{ ["--tone" as string]: toneVar(tone) }} disabled={disabled}>20      {glyph && <Glyph name={glyph} />}21      {children}22    </button>23  );24}

1.app-button {2  --tone: var(--color-deep-space-200);3  position: relative;4  display: inline-flex;5  align-items: center;6  justify-content: center;7  gap: var(--spacing-f8);8  height: var(--spacing-f55);9  padding: 0 var(--spacing-f21);10  border-radius: var(--radius-full);11  border: var(--spacing-f1) solid color-mix(in srgb, var(--c-text) var(--mag-3), var(--tone));12  background: linear-gradient(180deg, color-mix(in srgb, var(--c-text) var(--mag-3), var(--tone)), var(--tone));13  color: var(--c-ink);14  font-family: inherit;15  font-size: var(--text-s0);16  line-height: 1;17  font-weight: 700;18  cursor: pointer;19  box-shadow: var(--highlight), 0 var(--spacing-f8) var(--spacing-f21) calc(var(--spacing-f8) * -1) var(--tone);20  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.4s;21}2223.app-button svg { width: var(--spacing-f21); height: var(--spacing-f21); fill: currentColor; }2425.app-button:hover { transform: translateY(calc(var(--spacing-f2) * -1)); box-shadow: var(--highlight), 0 var(--spacing-f13) var(--spacing-f21) calc(var(--spacing-f5) * -1) var(--tone); }2627.app-button.is-glass {28  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) var(--mag-3), var(--c-ink)), color-mix(in srgb, var(--tone) var(--mag-5), var(--c-ink)));29  border-color: color-mix(in srgb, var(--tone) var(--mag-2), transparent);30  color: var(--c-text);31  font-weight: 500;32}3334.app-button.is-outline { background: transparent; border-color: var(--tone); color: var(--tone); box-shadow: none; font-weight: 500; }3536.app-button.is-sm { height: var(--spacing-f34); padding: 0 var(--spacing-f13); font-size: var(--text-s-1); }

1AstrGlassButton(2label: 'Explore',3icon: Icons.explore,4tone: AstrTone.deepSpace,5variant: AstrButtonVariant.filled,6onPressed: () {},7)

1/// Visual weight of an [AstrGlassButton]. Filled is the default.2enum AstrButtonVariant { filled, glass, outline }

1/// A pill button, [AstrSize.control] tall (55, the touch target), or2/// [AstrSize.controlCompact] (34). Filled uses the tone as its fill with dark3/// text; glass tints the surface; outline draws only the edge. Pressed, it4/// squeezes slightly and glows in its tone, even the quiet variants.5class AstrGlassButton extends StatefulWidget {6  const AstrGlassButton({7    super.key,8    required this.label,9    this.icon,10    this.tone = AstrTone.deepSpace,11    this.variant = AstrButtonVariant.filled,12    this.compact = false,13    this.onPressed,14  });1516  final String label;17  final IconData? icon;18  final AstrTone tone;19  final AstrButtonVariant variant;20  final bool compact;21  final VoidCallback? onPressed;2223  @override24  State<AstrGlassButton> createState() => _AstrGlassButtonState();25}