Buttons, Badges, Trees & Visual Elements

1<script lang="ts">
2  import { Button, CodeBlock, useLocale } from 'yaxa-svelte';
3  const { formatCurrency } = useLocale();
4  let count = $state(0);
5</script>
6
7<div class="space-y-4">
8  <p>Price: {formatCurrency(49.99, 'USD')}</p>
9  <Button color="primary" onclick={() => count++}>
10    Clicks: {count}
11  </Button>
12</div>

1% Euler's Identity & Gaussian Integral
2\[ e^{i\pi} + 1 = 0 \]
3\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
4
5% Quadratic Formula
6x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

1<template>
2  <div class="counter-card">
3    <h2>{{ title }}</h2>
4    <button @click="increment" :disabled="isLoading">
5      Count: {{ count }}
6    </button>
7  </div>
8</template>
9
10<script setup lang="ts">
11import { ref } from 'vue';
12const count = ref(0);
13const increment = () => count.value++;
14</script>

1import React, { useState, useEffect } from 'react';
2
3interface MetricProps {
4  label: string;
5  initialValue?: number;
6}
7
8export const Metric: React.FC<MetricProps> = ({ label, initialValue = 0 }) => {
9  const [val, setVal] = useState(initialValue);
10  return (
11    <div className="metric-pill" onClick={() => setVal(v => v + 1)}>
12      <span>{label}</span>
13      <strong>{val}</strong>
14    </div>
15  );
16};