UI Button Examples

This file shows how to implement a basic "Click me" button in multiple frameworks. You can copy the entire block and extract the parts you need.

Multiple Framework Implementations

// ====================
// React
// ====================
import React from 'react';

const MyButton = () => (
  <button onClick={() => alert('Clicked!')}>
    Click me
  </button>
);

export default MyButton;

// ====================
// Vue
// ====================
/* File: Button.vue */
<template>
  <button @click="handleClick">
    Click me
  </button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Clicked!');
    }
  }
}
</script>

// ====================
// Angular
// ====================
/* File: button.component.html */
<button (click)="onClick()">Click me</button>

/* File: button.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html'
})
export class ButtonComponent {
  onClick() {
    alert('Clicked!');
  }
}