button function

BloomNode button({ required String text, BloomEventHandler? onClick, String? href, ButtonVariant variant = ButtonVariant.primary, ButtonSize size = ButtonSize.md, bool disabled = false, String? icon, bool loading = false, String extraClassName = '', Map<String, String> attrs = const {}, List<BloomNode>? children, })

Generic Button primitive for Bloom UI.

Implementation

BloomNode button({
  required String text,
  BloomEventHandler? onClick,
  String? href,
  ButtonVariant variant = ButtonVariant.primary,
  ButtonSize size = ButtonSize.md,
  bool disabled = false,
  String? icon,
  bool loading = false,
  String extraClassName = '',
  Map<String, String> attrs = const {},
  List<BloomNode>? children,
}) {
  final isInactive = disabled || loading;
  final className = buttonClasses(
    variant: variant,
    size: size,
    extraClassName: isInactive
        ? cn(['opacity-50 pointer-events-none', extraClassName])
        : extraClassName,
  );

  final content = <BloomNode>[
    if (loading)
      uiIcon('spinner', className: 'w-4 h-4 animate-spin')
    else if (icon != null)
      uiIcon(icon, className: 'w-4 h-4'),
    if (text.isNotEmpty) Text(text),
    if (children != null) ...children,
  ];

  if (href != null && !isInactive) {
    return Link(
      href: href,
      className: className,
      attrs: attrs,
      onClick: onClick,
      children: content,
    );
  }

  return El(
    'button',
    attrs: {
      'type': 'button',
      if (isInactive) 'disabled': 'true',
      if (isInactive) 'aria-disabled': 'true',
      ...attrs,
    },
    className: className,
    onClick: isInactive ? null : onClick,
    children: content,
  );
}