shared/ui/Button.astro - dev - githubmirror/tabler

shared/ui/Button.astro
62 строки2 KB
Paweł Kuna
Narrow component prop types, remove unused props and dead code (#2838)
10 авг 2026, 00:14
10 авг 2026, 00:144f7beec
---
// TODO: spinner param (needs Spinner.astro).
// TODO: provider param (unused in markup).
// TODO: color=false special case — pass no color prop instead.
import Icon from './Icon.astro'

/** core/scss/ui/_buttons.scss `.btn-{size}` modifier classes — 'md' is the default (no class emitted) */
type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'

interface Props {
  text?: string
  href?: string
  /** raw href + target="_blank" rel="noreferrer" */
  external?: boolean
  element?: 'a' | 'button'
  type?: 'button' | 'reset' | 'submit'
  id?: string
  color?: string | undefined
  outline?: boolean
  ghost?: boolean
  size?: ButtonSize | undefined
  block?: boolean
  class?: string
  icon?: string
  iconColor?: string
  iconEnd?: string
  iconOnly?: boolean
  /** data-bs-toggle="modal" data-bs-target="#modal-{modalId}" (modal-id param) */
  modalId?: string
  /** data-bs-toggle="toast" data-bs-target="#toast-{toastId}" (toast-id param) */
  toastId?: string
  /** data-bs-dismiss="modal" */
  dismiss?: boolean
  /** data-bs-toggle="dropdown" */
  dropdown?: boolean
}

const { text = 'Button', href, external, element, type, id, color, outline, ghost, size, block, class: className, icon, iconColor, iconEnd, iconOnly, modalId, toastId, dismiss, dropdown } = Astro.props

// Without a real destination the control is an action, so render <button>; internal hrefs are prefixed with '/'.
const Element = element ?? (href ? 'a' : 'button')
const resolvedHref = href ? (external ? href : `/${href}`) : '#'

const classes = ['btn', color && `btn-${outline ? 'outline-' : ghost ? 'ghost-' : ''}${color}`, size && size !== 'md' && `btn-${size}`, className, block && 'w-100', iconOnly && 'btn-icon']
---

<Element
  href={Element === 'a' ? resolvedHref : undefined}
  type={Element === 'button' ? (type ?? 'button') : undefined}
  id={id}
  class:list={classes}
  target={external ? '_blank' : undefined}
  rel={external ? 'noreferrer' : undefined}
  data-bs-toggle={dropdown ? 'dropdown' : modalId ? 'modal' : toastId ? 'toast' : undefined}
  data-bs-target={!dropdown && modalId ? `#modal-${modalId}` : !dropdown && toastId ? `#toast-${toastId}` : undefined}
  aria-label={iconOnly ? text : undefined}
  data-bs-dismiss={dismiss ? 'modal' : undefined}
>
  {icon && <Icon name={icon} color={iconColor} />}
  {!iconOnly && text}
  {!iconOnly && iconEnd && <Icon name={iconEnd} class="icon-end" />}
</Element>