Button

import { Button } from "@/components/ui/button-1";
import React from "react"
import { Star, Loader, RefreshCw } from "lucide-react"

// Simple star icon component
const StarIcon = () => (
  <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>
);

export default function DemoOne() {
  const [loading, setLoading] = React.useState<string | null>(null);
  
  const handleAction = (action: string) => {
    setLoading(action);
    setTimeout(() => setLoading(null), 2000);
  };

  return (
    <div>
    <style>
      {`
        /* Button CSS Variables */
    .rb-button,
    .rb-button__element {
      /* General */
      --rb-btn-font-family: var(--c-rb-btn-font-family, var(--c-rb-font-family, 'Roboto', sans-serif));
      --rb-btn-font-size: var(--c-rb-btn-font-size, var(--c-rb-fontsizeButton, 1rem));
      --rb-btn-font-size-icon: var(--c-rb-btn-font-size-icon, 1.125rem);
      --rb-btn-text-decoration: var(--c-rb-btn-text-decoration, none);
      --rb-btn-border-radius: var(--c-rb-btn-border-radius, 3.125rem);
      --rb-btn-min-width: var(--c-rb-btn-min-width, 6rem);
      --rb-btn-height: var(--c-rb-btn-height, 2.5rem);
      --rb-btn-padding: var(--c-rb-btn-padding, 0.5rem 1rem);

      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-primaryBase, #48555b));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-width: var(--c-rb-btn-border-width, 1px);
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-primaryBase, #48555b));
      --rb-btn-box-shadow: var(--c-rb-btn-box-shadow, none);

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-primaryD100, #3b4448));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-width-hover: var(--c-rb-btn-border-width-hover, 1px);
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-primaryD100, #3b4448));
      --rb-btn-box-shadow-hover: var(--c-rb-btn-box-shadow-hover, none);

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-primaryD200, #32383b));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-width-pressed: var(--c-rb-btn-border-width-pressed, 1px);
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-primaryD200, #32383b));
      --rb-btn-box-shadow-pressed: var(--c-rb-btn-box-shadow-pressed, inset 2px 2px 3px rgba(27, 27, 27, 0.16));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-primaryBase, #48555b));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-width-focus: var(--c-rb-btn-border-width-focus, 1px);
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-primaryBase, #48555b));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-primaryL100, #7f888c));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-primaryL400, #edeeef));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-primaryL100, #7f888c));
      --rb-btn-border-width-disabled: var(--c-rb-btn-border-width-disabled, 1px);
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-primaryL400, #edeeef));
      --rb-btn-box-shadow-disabled: var(--c-rb-btn-box-shadow-disabled, none);

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-primaryL300, #c8ccce));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-primaryL100, #7f888c));
      --rb-btn-border-width-disabled-hover: var(--c-rb-btn-border-width-disabled-hover, 1px);
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-primaryL300, #c8ccce));
      --rb-btn-box-shadow-disabled-hover: var(--c-rb-btn-box-shadow-disabled-hover, none);

      /* Loading */
      --rb-btn-bg-loading-animation: var(--c-rb-btn-bg-loading-animation, var(--c-rb-primaryD400, #202121));
      --rb-btn-loading-animation-duration: var(--c-rb-btn-loading-animation-duration, 1.5s);
      --rb-btn-bg-loading-animation-disabled: var(--c-rb-btn-bg-loading-animation-disabled, var(--c-rb-grayscaleBase, #9b9b9b));
    }

    .rb-button {
      display: inline-flex;
    }

    .rb-button:not(.rb-button__only-icon) {
      min-width: var(--rb-btn-min-width);
    }

    .rb-button__element {
      width: 100%;
      font-family: var(--rb-btn-font-family);
      font-size: var(--rb-btn-font-size);
      justify-content: center;
      align-items: center;
      border-radius: var(--rb-btn-border-radius);
      transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
      border-style: solid;
      border-width: var(--rb-btn-border-width);
      border-color: var(--rb-btn-border-color);
      background: var(--rb-btn-bg);
      color: var(--rb-btn-color);
      box-shadow: var(--rb-btn-box-shadow);
      display: inline-flex;
      cursor: pointer;
      text-decoration: var(--rb-btn-text-decoration);
      outline: none;
      position: relative;
      padding: var(--rb-btn-padding);
      height: var(--rb-btn-height);
      min-width: var(--rb-btn-min-width);
    }

    .rb-button__element:hover:not(:disabled) {
      background: var(--rb-btn-bg-hover) !important;
      color: var(--rb-btn-color-hover) !important;
      border-color: var(--rb-btn-border-color-hover) !important;
      border-width: var(--rb-btn-border-width-hover) !important;
      box-shadow: var(--rb-btn-box-shadow-hover) !important;
    }

    .rb-button__element:active:not(:disabled) {
      background: var(--rb-btn-bg-pressed) !important;
      color: var(--rb-btn-color-pressed) !important;
      border-color: var(--rb-btn-border-color-pressed) !important;
      border-width: var(--rb-btn-border-width-pressed) !important;
      box-shadow: var(--rb-btn-box-shadow-pressed) !important;
    }

    /* Focus visible solo para navegación por teclado (accesibilidad) */
    .rb-button__element:focus-visible:not(:active):not(:disabled) {
      background: var(--rb-btn-bg-focus) !important;
      color: var(--rb-btn-color-focus) !important;
      border-color: var(--rb-btn-border-color-focus) !important;
      border-width: var(--rb-btn-border-width-focus) !important;
      box-shadow: var(--rb-btn-box-shadow-focus) !important;
    }

    /* NO mostrar focus en clics de mouse */
    .rb-button__element:focus:not(:focus-visible) {
      outline: none;
    }

    .rb-button__element:disabled,
    .rb-button__disabled .rb-button__element {
      cursor: default;
      background: var(--rb-btn-bg-disabled) !important;
      color: var(--rb-btn-color-disabled) !important;
      border-color: var(--rb-btn-border-color-disabled) !important;
      border-width: var(--rb-btn-border-width-disabled) !important;
      box-shadow: var(--rb-btn-box-shadow-disabled) !important;
    }

    .rb-button__element:disabled:hover,
    .rb-button__disabled .rb-button__element:hover {
      background: var(--rb-btn-bg-disabled-hover) !important;
      color: var(--rb-btn-color-disabled-hover) !important;
      border-color: var(--rb-btn-border-color-disabled-hover) !important;
      border-width: var(--rb-btn-border-width-disabled-hover) !important;
      box-shadow: var(--rb-btn-box-shadow-disabled-hover) !important;
    }

    .rb-button__icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 1.333333333333em;
      height: 1.333333333333em;
      line-height: 1em;
      font-size: var(--rb-btn-font-size-icon);
      flex-shrink: 0;
    }

    /* Específicamente para Font Awesome - asegurar alineación perfecta */
    .rb-button__icon.fa,
    .rb-button__icon.fas,
    .rb-button__icon.far,
    .rb-button__icon.fal,
    .rb-button__icon.fab {
      line-height: 1;
      vertical-align: baseline;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Resetear pseudoelementos de Font Awesome que puedan interferir */
    .rb-button__icon.fa::before,
    .rb-button__icon.fas::before,
    .rb-button__icon.far::before,
    .rb-button__icon.fal::before,
    .rb-button__icon.fab::before {
      line-height: inherit;
      vertical-align: baseline;
    }

    .rb-button__icon--left {
      margin-right: 0.5rem;
    }

    .rb-button__icon--right {
      margin-left: 0.5rem;
    }

    .rb-button__only-icon .rb-button__element {
      min-width: unset !important;
      padding: 0;
      width: var(--rb-btn-height);
      height: var(--rb-btn-height);
      border-radius: var(--rb-btn-border-radius);
    }

    .rb-button__only-icon .rb-button__icon--left,
    .rb-button__only-icon .rb-button__icon--right {
      margin: 0;
    }

    /* Button label */
    .rb-button__label {
      font-family: var(--rb-btn-font-family);
      font-size: var(--rb-btn-font-size);
      text-decoration: var(--rb-btn-text-decoration);
      font-weight: 700;
      line-height: 140%;
      flex: unset;
    }

    /* Loading state */
    .rb-button__loading .rb-button__element {
      pointer-events: none;
    }

    /* Animación del gradiente de izquierda a derecha */
    @keyframes moverGradiente {
      0% {
        left: -110%; /* Empieza fuera a la izquierda */
      }
      100% {
        left: 0%; /* Llega a la derecha completamente */
      }
    }

    .rb-button__animation .rb-button__element {
      position: relative;
      z-index: 1;
      overflow: hidden; /* Evita que la animación se desborde del botón */
    }

    .rb-button__animation .rb-button__element::before {
      content: '';
      position: absolute;
      top: 0;
      left: -110%;
      width: 110%;
      height: 100%;
      transition: all 1s ease;
      z-index: 0;
    }

    .rb-button__animation .rb-button__label {
      z-index: 1;
      position: relative;
    }

    .rb-button__loading.rb-button__animation .rb-button__element::before {
      animation: moverGradiente linear infinite;
    }

    /* STROKE VARIANT */
    .rb-button__stroke .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-primaryBase, #48555b));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-primaryL400, #edeeef));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-primaryD100, #3b4448));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-primaryD100, #3b4448));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-primaryL300, #c8ccce));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-primaryD200, #32383b));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-primaryD200, #32383b));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-primaryBase, #48555b));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-primaryL100, #7f888c));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-primaryL200, #a4aaad));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-primaryL400, #edeeef));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-primaryL100, #7f888c));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-primaryL200, #a4aaad));
    }

    /* TEXT VARIANT */
    .rb-button__text .rb-button__element {
      --rb-btn-text-decoration: var(--c-rb-btn-text-decoration, underline);

      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, transparent);
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color: var(--c-rb-btn-border-color, transparent);

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-primaryL400, #edeeef));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-primaryD100, #3b4448));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-primaryL400, #edeeef));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-primaryL300, #c8ccce));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-primaryD200, #32383b));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-primaryL300, #c8ccce));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, transparent);
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, transparent);

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, transparent);
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-primaryL100, #7f888c));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, transparent);

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-primaryL400, #edeeef));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-primaryL100, #7f888c));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-primaryL400, #edeeef));
    }

    /* SECONDARY VARIANT */
    .rb-button__secondary .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-secondaryBase, #afc4cc));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-secondaryD100, #9cb6c0));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-secondaryD100, #9cb6c0));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-secondaryD200, #90adb8));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-secondaryD200, #90adb8));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-secondaryL100, #c7d6db));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-secondaryL400, #f7f9fa));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-secondaryL100, #c7d6db));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-secondaryL400, #f7f9fa));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-secondaryL300, #e7edf0));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-secondaryL100, #c7d6db));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-secondaryL300, #e7edf0));
    }

    .rb-button__secondary.rb-button__stroke .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-secondaryBase, #afc4cc));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-secondaryL400, #f7f9fa));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-secondaryD100, #9cb6c0));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-secondaryD100, #9cb6c0));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-secondaryL300, #e7edf0));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-secondaryD200, #90adb8));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-secondaryD200, #90adb8));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-secondaryL100, #c7d6db));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-secondaryL100, #c7d6db));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-secondaryL300, #e7edf0));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-secondaryL400, #f7f9fa));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-secondaryL100, #c7d6db));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-secondaryL400, #f7f9fa));
    }

    .rb-button__secondary.rb-button__text .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, transparent);
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-color: var(--c-rb-btn-border-color, transparent);

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-secondaryL400, #f7f9fa));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-secondaryD100, #9cb6c0));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-secondaryL400, #f7f9fa));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-secondaryL300, #e7edf0));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-secondaryD200, #90adb8));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-secondaryL300, #e7edf0));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, transparent);
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-secondaryBase, #afc4cc));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, transparent);
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-secondaryL100, #c7d6db));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, transparent);
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-secondaryL100, #c7d6db));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, transparent);

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-secondaryL400, #f7f9fa));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-secondaryL100, #c7d6db));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-secondaryL400, #f7f9fa));
    }

    /* TERTIARY VARIANT */
    .rb-button__tertiary .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-tertiaryBase, #bec0c6));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-tertiaryD100, #afb1b9));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-tertiaryD100, #afb1b9));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-tertiaryD200, #a5a7b0));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-tertiaryD200, #a5a7b0));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-primaryBase, #48555b));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-tertiaryL100, #d2d3d7));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-tertiaryL400, #f8f9f9));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-tertiaryL100, #d2d3d7));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-tertiaryL400, #f8f9f9));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-tertiaryL300, #ececee));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-tertiaryL100, #d2d3d7));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-tertiaryL300, #ececee));
    }

    .rb-button__tertiary.rb-button__stroke .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-tertiaryBase, #bec0c6));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-tertiaryL400, #f8f9f9));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-tertiaryD100, #afb1b9));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-tertiaryD100, #afb1b9));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-tertiaryL300, #ececee));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-tertiaryD200, #a5a7b0));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-tertiaryD200, #a5a7b0));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-tertiaryL100, #d2d3d7));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-tertiaryL100, #d2d3d7));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-tertiaryL200, #dfe0e3));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-tertiaryL400, #f8f9f9));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-tertiaryL200, #dfe0e3));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-tertiaryL200, #dfe0e3));
    }

    .rb-button__tertiary.rb-button__text .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, transparent);
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-border-color: var(--c-rb-btn-border-color, transparent);

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, transparent);
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-tertiaryD100, #afb1b9));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, transparent);

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, transparent);
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-tertiaryD200, #a5a7b0));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, transparent);

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, transparent);
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-tertiaryBase, #bec0c6));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, transparent);
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-tertiaryL100, #d2d3d7));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, transparent);
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-tertiaryL100, #d2d3d7));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, transparent);

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, transparent);
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-tertiaryL200, #dfe0e3));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, transparent);
    }

    /* ERROR VARIANT */
    .rb-button__error .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-errorBase, #dc3545));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-errorBase, #dc3545));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-errorD100, #c93241));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-errorD100, #c93241));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-errorBase, #dc3545));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-errorBase, #dc3545));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-errorBase, #dc3545));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-errorBase, #dc3545));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-errorL100, #e7727d));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-errorL400, #fbebec));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-errorL200, #ee9aa2));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-errorL400, #fbebec));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-errorL300, #f5c2c7));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-errorL200, #ee9aa2));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-errorL300, #f5c2c7));
    }

    .rb-button__error.rb-button__stroke .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-errorBase, #dc3545));
      --rb-btn-border-color: var(--c-rb-btn-border-color, var(--c-rb-errorBase, #dc3545));

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-errorD100, #c93241));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, var(--c-rb-errorD100, #c93241));

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-errorBase, #dc3545));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, var(--c-rb-errorBase, #dc3545));

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-errorBase, #dc3545));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, var(--c-rb-errorBase, #dc3545));
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-errorL100, #e7727d));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, var(--c-rb-grayscaleWhite, #ffffff));
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-errorL200, #ee9aa2));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, var(--c-rb-errorL200, #ee9aa2));

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-errorL400, #fbebec));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-errorL200, #ee9aa2));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-errorL200, #ee9aa2));
    }

    .rb-button__error.rb-button__text .rb-button__element {
      /* Default */
      --rb-btn-bg: var(--c-rb-btn-bg, transparent);
      --rb-btn-color: var(--c-rb-btn-color, var(--c-rb-errorBase, #dc3545));
      --rb-btn-border-color: var(--c-rb-btn-border-color, transparent);

      /* Hover */
      --rb-btn-bg-hover: var(--c-rb-btn-bg-hover, transparent);
      --rb-btn-color-hover: var(--c-rb-btn-color-hover, var(--c-rb-errorD100, #c93241));
      --rb-btn-border-color-hover: var(--c-rb-btn-border-color-hover, transparent);

      /* Pressed */
      --rb-btn-bg-pressed: var(--c-rb-btn-bg-pressed, transparent);
      --rb-btn-color-pressed: var(--c-rb-btn-color-pressed, var(--c-rb-errorBase, #dc3545));
      --rb-btn-border-color-pressed: var(--c-rb-btn-border-color-pressed, transparent);

      /* Focus */
      --rb-btn-bg-focus: var(--c-rb-btn-bg-focus, transparent);
      --rb-btn-color-focus: var(--c-rb-btn-color-focus, var(--c-rb-errorBase, #dc3545));
      --rb-btn-border-color-focus: var(--c-rb-btn-border-color-focus, transparent);
      --rb-btn-box-shadow-focus: var(--c-rb-btn-box-shadow-focus, 0 0 0 1px #ffffff, 0 0 0 3px var(--c-rb-errorL100, #e7727d));

      /* Disabled */
      --rb-btn-bg-disabled: var(--c-rb-btn-bg-disabled, transparent);
      --rb-btn-color-disabled: var(--c-rb-btn-color-disabled, var(--c-rb-errorL200, #ee9aa2));
      --rb-btn-border-color-disabled: var(--c-rb-btn-border-color-disabled, transparent);

      /* Disabled - Hover */
      --rb-btn-bg-disabled-hover: var(--c-rb-btn-bg-disabled-hover, var(--c-rb-errorL400, #fbebec));
      --rb-btn-color-disabled-hover: var(--c-rb-btn-color-disabled-hover, var(--c-rb-errorL200, #ee9aa2));
      --rb-btn-border-color-disabled-hover: var(--c-rb-btn-border-color-disabled-hover, var(--c-rb-errorL400, #fbebec));
    }

    /* LOADING ANIMATION STYLES */
    .rb-button__animation .rb-button__element::before {
      background: var(--rb-btn-bg-loading-animation);
      border-radius: 0 var(--rb-btn-border-radius) var(--rb-btn-border-radius) 0;
      animation-duration: var(--rb-btn-loading-animation-duration) !important;
    }

    .rb-button__loading.rb-button__animation .rb-button__element::before {
      animation: moverGradiente linear infinite;
      animation-duration: var(--rb-btn-loading-animation-duration) !important;
    }

    /* LOADING SIN ANIMATION: Solo posición relativa para el icono de loading */
    .rb-button__loading .rb-button__element {
      position: relative;
      z-index: 1;
    }

    /* LOADING CON ANIMATION: Agrega overflow y ::before para la barra */
    .rb-button__loading.rb-button__animation .rb-button__element {
      overflow: hidden; /* Solo cuando hay animación */
    }

    .rb-button__loading.rb-button__animation .rb-button__element::before {
      content: '';
      position: absolute;
      top: 0;
      left: -110%;
      width: 110%;
      height: 100%;
      transition: all 1s ease;
      z-index: 0;
      background: var(--rb-btn-bg-loading-animation);
      border-radius: 0 var(--rb-btn-border-radius) var(--rb-btn-border-radius) 0;
      animation: moverGradiente linear infinite;
      animation-duration: var(--rb-btn-loading-animation-duration) !important;
    }

    .rb-button__loading.rb-button__animation .rb-button__label {
      z-index: 1;
      position: relative;
    }

    .rb-button__disabled.rb-button__animation .rb-button__element::before {
      background: var(--rb-btn-bg-loading-animation-disabled);
    }
`
      }
    </style>
    <div className="p-8 space-y-8 bg-gray-50 min-h-screen">
      <div className="space-y-6">
        <h1 className="text-3xl font-bold text-gray-900">Button Component States</h1>
        
        {/* Primary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Primary</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Primary States */}
            <Button>Button</Button>
            <Button rightIcon={<StarIcon />}>Button</Button>
            <Button leftIcon={<StarIcon />}>Button</Button>
            <Button size="icon" leftIcon={<StarIcon />} />
            <Button loading />
            <Button loading iconPosition="right">Button</Button>
            <Button loading animation>Button</Button>
            <Button disabled>Button</Button>
            
            {/* Stroke Primary States */}
            <Button variant="stroke">Button</Button>
            <Button variant="stroke" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="stroke" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="stroke" size="icon" leftIcon={<StarIcon />} />
            <Button variant="stroke" loading />
            <Button variant="stroke" loading iconPosition="right">Button</Button>
            <Button variant="stroke" loading animation>Button</Button>
            <Button variant="stroke" disabled>Button</Button>
            
            {/* Text Primary States */}
            <Button variant="text">Button</Button>
            <Button variant="text" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="text" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="text" size="icon" leftIcon={<StarIcon />} />
            <Button variant="text" loading />
            <Button variant="text" loading iconPosition="right">Button</Button>
            <Button variant="text" loading animation>Button</Button>
            <Button variant="text" disabled>Button</Button>
          </div>
        </section>

        {/* Secondary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Secondary</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Secondary States */}
            <Button variant="secondary">Button</Button>
            <Button variant="secondary" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="secondary" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="secondary" size="icon" leftIcon={<StarIcon />} />
            <Button variant="secondary" loading />
            <Button variant="secondary" loading iconPosition="right">Button</Button>
            <Button variant="secondary" loading animation>Button</Button>
            <Button variant="secondary" disabled>Button</Button>
            
            {/* Stroke Secondary States */}
            <Button variant="secondary-stroke">Button</Button>
            <Button variant="secondary-stroke" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="secondary-stroke" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="secondary-stroke" size="icon" leftIcon={<StarIcon />} />
            <Button variant="secondary-stroke" loading />
            <Button variant="secondary-stroke" loading iconPosition="right">Button</Button>
            <Button variant="secondary-stroke" loading animation>Button</Button>
            <Button variant="secondary-stroke" disabled>Button</Button>
            
            {/* Text Secondary States */}
            <Button variant="secondary-text">Button</Button>
            <Button variant="secondary-text" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="secondary-text" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="secondary-text" size="icon" leftIcon={<StarIcon />} />
            <Button variant="secondary-text" loading />
            <Button variant="secondary-text" loading iconPosition="right">Button</Button>
            <Button variant="secondary-text" loading animation>Button</Button>
            <Button variant="secondary-text" disabled>Button</Button>
          </div>
        </section>

        {/* Tertiary Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-purple-600">Tertiary</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Tertiary States */}
            <Button variant="tertiary">Button</Button>
            <Button variant="tertiary" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="tertiary" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="tertiary" size="icon" leftIcon={<StarIcon />} />
            <Button variant="tertiary" loading />
            <Button variant="tertiary" loading iconPosition="right">Button</Button>
            <Button variant="tertiary" loading animation>Button</Button>
            <Button variant="tertiary" disabled>Button</Button>
            
            {/* Stroke Tertiary States */}
            <Button variant="tertiary-stroke">Button</Button>
            <Button variant="tertiary-stroke" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="tertiary-stroke" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="tertiary-stroke" size="icon" leftIcon={<StarIcon />} />
            <Button variant="tertiary-stroke" loading />
            <Button variant="tertiary-stroke" loading iconPosition="right">Button</Button>
            <Button variant="tertiary-stroke" loading animation>Button</Button>
            <Button variant="tertiary-stroke" disabled>Button</Button>
            
            {/* Text Tertiary States */}
            <Button variant="tertiary-text">Button</Button>
            <Button variant="tertiary-text" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="tertiary-text" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="tertiary-text" size="icon" leftIcon={<StarIcon />} />
            <Button variant="tertiary-text" loading />
            <Button variant="tertiary-text" loading iconPosition="right">Button</Button>
            <Button variant="tertiary-text" loading animation>Button</Button>
            <Button variant="tertiary-text" disabled>Button</Button>
          </div>
        </section>

        {/* Error Variants */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold text-red-600">Error</h2>
          <div className="grid grid-cols-8 gap-2 items-center">
            {/* Fill Error States */}
            <Button variant="error">Button</Button>
            <Button variant="error" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="error" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="error" size="icon" leftIcon={<StarIcon />} />
            <Button variant="error" loading />
            <Button variant="error" loading iconPosition="right">Button</Button>
            <Button variant="error" loading animation>Button</Button>
            <Button variant="error" disabled>Button</Button>
            
            {/* Stroke Error States */}
            <Button variant="error-stroke">Button</Button>
            <Button variant="error-stroke" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="error-stroke" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="error-stroke" size="icon" leftIcon={<StarIcon />} />
            <Button variant="error-stroke" loading />
            <Button variant="error-stroke" loading iconPosition="right">Button</Button>
            <Button variant="error-stroke" loading animation>Button</Button>
            <Button variant="error-stroke" disabled>Button</Button>
            
            {/* Text Error States */}
            <Button variant="error-text">Button</Button>
            <Button variant="error-text" rightIcon={<StarIcon />}>Button</Button>
            <Button variant="error-text" leftIcon={<StarIcon />}>Button</Button>
            <Button variant="error-text" size="icon" leftIcon={<StarIcon />} />
            <Button variant="error-text" loading />
            <Button variant="error-text" loading iconPosition="right">Button</Button>
            <Button variant="error-text" loading animation>Button</Button>
            <Button variant="error-text" disabled>Button</Button>
          </div>
        </section>
      </div>
    </div>
    </div>
  );
}