@gospore/button

Buttons trigger primary actions across the product. The package ships the Button component, an IconButton variant for square icon-only actions, and a lightweight ButtonGroup wrapper that keeps button spacing consistent.

Slots

• default: Button label.
• iconBefore: Optional leading icon/content.
• iconAfter: Optional trailing icon/content (often used for chevrons).

IconButton

Use IconButton for actions represented only by an icon, such as calendar navigation or toolbar commands. It accepts the same appearance, spacing, selected, pressed, and loading props as Button, but always renders as a square control.

<IconButton appearance="subtle" label="Previous month">
    <font-awesome-icon :icon="faChevronLeft" />
</IconButton>

ButtonGroup

The ButtonGroup component is a simple flex row with role="group" that applies consistent gaps between child buttons:

<ButtonGroup>
    <Button appearance="subtle">Previous</Button>
    <Button appearance="primary">Continue</Button>
</ButtonGroup>

Accessibility

• Buttons render with type="button" so they do not accidentally submit forms.
• Icon-only actions should use IconButton with its required label prop so the button has an accessible name even when there is no visible text.
• Use pressed only for toggle buttons. selected is intentionally visual so menu triggers and active-looking command buttons do not announce the wrong pressed state.
• Loading buttons set disabled to prevent duplicate submissions and display a visible spinner that inherits adequate contrast from the chosen appearance. They also expose aria-busy="true" while work is pending. Loading remains authoritative even if a wrapper explicitly passes disabled="false"; use the disabled prop for ordinary unavailable actions.
• Foreground and background colors use a short transition for hover, active, selected, and theme changes. Contrast is guaranteed at the settled light and dark endpoints; brief interpolation during a theme switch is intentional.