npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@kit-ng-ui/button

v0.2.0

Published

Kit UI Button component — ant-design feature parity.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

hoangns832hoangns832

Keywords

Readme

@kit-ng-ui/button

The Button component for Kit UI. Mirrors ant-design's Button API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/button @kit-ng-ui/core @kit-ng-ui/icons

Styles

Import the package's stylesheet once at the app level (alongside @kit-ng-ui/core/styles):

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/button/styles' as button;

Namespaces must be distinct from other @kit-ng-ui/<pkg>/styles imports (Sass collapses the default namespace from the last path segment).

Use

import { Component } from '@angular/core';
import { KitButtonComponent, KitButtonGroupComponent } from '@kit-ng-ui/button';

@Component({
  standalone: true,
  imports: [KitButtonComponent, KitButtonGroupComponent],
  template: `
    <kit-button type="primary">Primary</kit-button>
    <kit-button type="default">Default</kit-button>
    <kit-button type="dashed">Dashed</kit-button>
    <kit-button type="text">Text</kit-button>
    <kit-button type="link" href="/docs">Link</kit-button>

    <kit-button type="primary" size="lg" prefix="check">Confirm</kit-button>
    <kit-button type="default" prefix="filter" suffix="chevron-down">Filter</kit-button>
    <kit-button type="primary" loading>Submitting</kit-button>
    <kit-button type="primary" danger>Delete</kit-button>
    <kit-button shape="circle" prefix="plus" type="primary" ariaLabel="Add" />

    <kit-button-group>
      <kit-button>Left</kit-button>
      <kit-button>Mid</kit-button>
      <kit-button>Right</kit-button>
    </kit-button-group>
  `,
})
export class ButtonDemo {}

API

<kit-button>

| Input | Type | Default | Description | | ----------- | -------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------- | | type | 'default' \| 'primary' \| 'dashed' \| 'text' \| 'link' | 'default' | Visual variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Control density | | shape | 'default' \| 'circle' \| 'round' | 'default' | Corner radius / aspect ratio | | danger | boolean | false | Switch type to a destructive color | | ghost | boolean | false | Transparent background for dark surfaces | | block | boolean | false | Fill parent width | | loading | boolean | false | Show spinner + block clicks; stays focusable & aria-busy (not natively disabled) | | disabled | boolean | false | Native disabled state (inert, out of tab order) | | prefix | string \| null | null | Leading icon name from @kit-ng-ui/icons registry | | suffix | string \| null | null | Trailing icon name. Combine with prefix for both ends | | htmlType | 'button' \| 'submit' \| 'reset' | 'button' | Native type attribute (when not a link) | | href | string \| null | null | If set, render as <a> instead of <button> | | target | string \| null | null | Anchor target attribute | | rel | string \| null | null | Anchor rel attribute | | ariaLabel | string \| null | null | Required for icon-only buttons (a11y) |

<kit-button-group>

Lays out adjacent buttons in a row with a consistent 8px gap. Each child keeps its own border and corner radius. No inputs.

Override the spacing per instance with the --kit-btn-group-gap CSS custom property:

<kit-button-group style="--kit-btn-group-gap: 4px;">
  <kit-button>One</kit-button>
  <kit-button>Two</kit-button>
</kit-button-group>

Behavior notes

  • When loading=true, the component renders the loading icon (spin) and, crucially, keeps the button focusable — it is not natively disabled. A native-disabled element is removed from the tab order and loses focus the instant it becomes disabled, which drops focus to <body> on the common submit/accept/decline pattern (WCAG 2.4.3 Focus Order). Instead, a loading button exposes aria-busy="true" + aria-disabled="true" and blocks activation by suppressing the native click (and its default action, e.g. form submit) while loading. Double-submit protection is preserved: a consumer's (click) handler never fires while [loading].
  • When disabled=true, the underlying <button> gets the native disabled attribute (truly inert, out of the tab order). If a button is both disabled and loading, disabled wins (native disabled).
  • danger × type produces all expected combinations (primary danger, default danger, link danger, text danger, dashed danger).
  • ghost is intended for placement over dark / colored backgrounds — pair with type="primary" for a colored border-only button.
  • Icon-only buttons (no projected text) get the kit-btn--icon-only modifier automatically to make padding square.
  • When href is set, the component renders an <a> and ignores htmlType; for accessibility, aria-disabled is applied (and the link is non-navigable) when disabled or loading.
  • Icons are referenced by name via [prefix] (leading) and [suffix] (trailing). To use a custom icon, register it with provideKitIcons(...) at app bootstrap (see @kit-ng-ui/icons). There is no [slot=icon] projection — projected content is treated as the button label.

Changelog

0.2.0

  • a11y fix (WCAG 2.4.3): a loading button is no longer mapped to the native disabled attribute. It now stays focusable and exposes aria-busy="true" + aria-disabled="true" instead of dropping focus to <body> when it becomes busy mid-submit. Only a genuinely disabled button is natively disabled/inert; disabled still wins when both are set.
  • Backward compatible: clicks are still suppressed while [loading] (and [disabled]) — the native click and its default action are guarded — so existing double-submit protection is preserved. The only observable change is that a loading button keeps focus and announces aria-busy.