@styloviz/button

Versatile button with semantic variants, sizes, icon slots, loading and block states.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/button

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvButtonComponent } from '@styloviz/button';

@Component({
  standalone: true,
  imports: [SvButtonComponent],
  template: `
    <sv-button />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | variant | ButtonVariant | 'primary' | Semantic color/intent: primary, secondary, success, danger, etc. | | btnStyle | ButtonStyle | 'solid' | Visual treatment: solid, soft, outline, ghost, link or gradient. | | size | ButtonSize | 'md' | Button size from xs to xl. | | shape | ButtonShape | 'rounded' | Corner style: rounded, pill or square. | | block | boolean | false | Stretch to 100% width. | | elevated | boolean | false | Add drop shadow. | | label | string | '' | Button text. Omit when projecting custom content. | | iconPath | string | '' | SVG path for the built-in leading/trailing icon (quick built-in icons, e.g. Heroicons path strings). Ignored when iconTemplate is set. | | iconViewBox | string | '0 0 24 24' | viewBox for the provided icon paths. | | trailingIconPath | string | '' | SVG path for the built-in secondary/dual trailing icon. Ignored when trailingIconTemplate is set. | | iconTemplate | ButtonIconTemplate | null | Custom template for the primary icon — use this to render a third-party icon component (e.g. lucide-angular, ngx-heroicons), an <img>, an icon font <i>, or arbitrary custom SVG instead of the built-in iconPath. Positioned per iconPosition(). Takes precedence over iconPath when set. | | trailingIconTemplate | ButtonIconTemplate | null | Custom template for the secondary/dual trailing icon. Takes precedence over trailingIconPath when set. See iconTemplate for usage. | | iconPosition | ButtonIconPos | 'leading' | Where the main icon sits relative to the label. | | counter | number \| null | null | Numeric counter badge. null = hidden. | | counterMax | number | 99 | Value above which the counter shows "{max}+". | | counterLabel | string | '' | Noun describing the counter for screen readers, e.g. "unread". | | type | ButtonType | 'button' | Native button type when not in link mode. | | disabled | boolean | false | Disable interaction and dim the button. | | loading | boolean | false | Show a loading indicator and block activation. | | loadingStyle | ButtonLoader | 'spinner' | Loading indicator style: spinner or dots. | | loadingLabel | string | '' | Optional text shown beside the loading indicator. | | href | string | '' | When set, renders an anchor instead of a . | | target | string | '_self' | Anchor target (e.g. _blank) when href is set. | | rel | string | '' | Anchor rel. noopener noreferrer is auto-added for target="_blank". | | download | string \| null | null | Anchor download attribute (filename or empty string to use the URL). | | name | string | '' | Native name for the button when submitted as part of a form. | | value | string | '' | Native value submitted with name for multi-button forms. | | ariaLabel | string | '' | Explicit accessible name. Required for icon-only buttons; overrides label. | | title | string | '' | Native tooltip / title attribute. | | autofocus | boolean | false | Autofocus the control on render. |

Outputs

| Output | Type | Description | | --- | --- | --- | | clicked | MouseEvent | Emitted on click (suppressed while disabled or loading). | | focused | FocusEvent | Emitted when the control receives focus. | | blurred | FocusEvent | Emitted when the control loses focus. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs

License

MIT