Button (Tombol)

<button type="button" class="mjl-btn mjl-btn--primary mjl-btn--md">Kirim Permohonan</button>
<button type="button" class="mjl-btn mjl-btn--outline mjl-btn--md">Simpan Draf</button>
<a href="/layanan" class="mjl-btn mjl-btn--ghost mjl-btn--md">Lihat Layanan</a>

<script setup lang="ts">
import { MjlButton } from '@majalengka/vue';

function kirim() {
  // proses formulir
}
</script>

<template>
  <MjlButton variant="primary" @click="kirim">Kirim Permohonan</MjlButton>
  <MjlButton variant="outline">Simpan Draf</MjlButton>
  <MjlButton variant="ghost" href="/layanan">Lihat Layanan</MjlButton>
  <MjlButton variant="primary" loading>Menyimpan...</MjlButton>
</template>

import type { ButtonHTMLAttributes } from 'react';

type Variant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';

interface MjlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: 'sm' | 'md' | 'lg';
}

export function MjlButton({ variant = 'primary', size = 'md', className = '', type = 'button', ...rest }: MjlButtonProps) {
  return <button type={type} className={`mjl-btn mjl-btn--${variant} mjl-btn--${size} ${className}`} {...rest} />;
}

// Pemakaian
export function Contoh() {
  return (
    <>
      <MjlButton onClick={() => console.log('kirim')}>Kirim Permohonan</MjlButton>
      <MjlButton variant="outline">Simpan Draf</MjlButton>
    </>
  );
}

import { Component, input } from '@angular/core';

@Component({
  selector: 'button[mjlButton]',
  standalone: true,
  host: { '[class]': '"mjl-btn mjl-btn--" + variant() + " mjl-btn--" + size()' },
  template: '<ng-content />',
})
export class MjlButton {
  variant = input<'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'>('primary');
  size = input<'sm' | 'md' | 'lg'>('md');
}

// Pemakaian (imports: [MjlButton]):
// <button mjlButton type="button" (click)="kirim()">Kirim Permohonan</button>
// <button mjlButton variant="outline" type="button">Simpan Draf</button>

{{-- resources/views/components/mjl/button.blade.php --}}
@props(['variant' => 'primary', 'size' => 'md', 'href' => null])

@if ($href)
  <a href="{{ $href }}" {{ $attributes->class(["mjl-btn mjl-btn--{$variant} mjl-btn--{$size}"]) }}>{{ $slot }}</a>
@else
  <button {{ $attributes->merge(['type' => 'button'])->class(["mjl-btn mjl-btn--{$variant} mjl-btn--{$size}"]) }}>{{ $slot }}</button>
@endif

{{-- Pemakaian --}}
<x-mjl.button type="submit">Kirim Permohonan</x-mjl.button>
<x-mjl.button variant="ghost" :href="route('layanan.index')">Lihat Layanan</x-mjl.button>

<?php
function mjl_button(string $label, string $variant = 'primary', string $size = 'md', string $type = 'button'): string
{
    $label = htmlspecialchars($label, ENT_QUOTES, 'UTF-8');
    return "<button type=\"{$type}\" class=\"mjl-btn mjl-btn--{$variant} mjl-btn--{$size}\">{$label}</button>";
}
?>

<form method="post" action="/permohonan">
  <?= mjl_button('Kirim Permohonan', 'primary', 'md', 'submit') ?>
  <?= mjl_button('Simpan Draf', 'outline') ?>
</form>