We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Button

Buttons are essential elements in user interfaces, serving as interactive components that trigger actions or events. They provide users with a visual cue for interaction and play a vital role in guiding navigation and facilitating user engagement.

Basic button

html

Optional properties

Use the properties below to style the button and copy the code to your project. Try clicking on them.

Property	Type	Description
`size`	`base` \| `compact` \| `tight` \| `wide`	Controls button sizing. `compact` has less padding, `tight` has even smaller padding and fonts (ideal for tab buttons), `wide` spans the full width of the parent container, and `base` follows the standard theme. Default is `base`.
`shape`	`flat` \| `pill` \| `curve`	Defines the button shape. `pill` is a fully rounded button, `curve` has rounded corners, and `flat` is a classic square-cornered button. Default is `flat`.
`variant`	`outlined` \| `default` \| `link`	Defines the button style. `outlined` is a bordered button, `link` creates an underlined link-style button, and `default` is the standard button.
`text`	string	Sets the button's text.
`icon`	string	Specifies a Font Awesome class for the button's icon (e.g., `fa-send`).
`iconPosition`	`left` \| `right`	Sets the icon's position relative to the button text. Defaults to `left`. Not required for `icononly` buttons.
`icononly`	boolean	Creates a button with only an icon (no text). Default is `false`.
`disabled`	boolean	Disables the button. Default is `false`.
`type`	`success` \| `warning` \| `error` \| `info` \| `default`	Defines the button type. `success` is a green button, `warning` is a yellow button, `error` is a red button, `info` is a blue button, and `default` is the standard button.
`img`	string	Specifies an image URL for the button's icon (e.g., `https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/1200px-Google_%22G%22_logo.svg.png`). Only works if `icon` is not specified.
`imgPosition`	`left` \| `right`	Sets the image's position relative to the button text. Defaults to `left`.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the button component.

Supported directives

Selector	Directive name	Description
`zapIcon`	ZapIconDirective	A directive that enables adding any type of icon to a button, including SVGs, font-based icons, and more.

Example

Preview

Code

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape and Size

Property	Description
`shape`	Defines the shape of the button. Can be `flat`, `curve`, or `pill`.
`size`	Defined the size of the button. Can be `compact` \| `wide` \| `tight` \| `base`

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the button.
`textColor`	Text color of the button.
`borderColor`	Border color of the button.
`bgHoverColor`	Background color of the button when hovered.
`textHoverColor`	Text color of the button when hovered.
`borderHoverColor`	Border color of the button when hovered.
`bgActiveColor`	Background color of the button when active (e.g., clicked).
`textActiveColor`	Text color of the button when active (e.g., clicked).
`borderActiveColor`	Border color of the button when active (e.g., clicked).
`disabledBgColor`	Background color of the button when disabled.
`disabledTextColor`	Text color of the button when disabled.
`disabledBorderColor`	Border color of the button when disabled.
`iconColor`	Color for the icon

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the button's corners.
`paddingLeft`	Left padding of the button.
`paddingRight`	Right padding of the button.
`paddingTop`	Top padding of the button.
`paddingBottom`	Bottom padding of the button.
`padding`	Padding around the button's content.
`width`	Width of the button.
`height`	Height of the button.
`fontSize`	Font size of the button's text.
`fontWeight`	Font weight of the button's text.
`lineHeight`	Line height of the button's text.
`letterSpacing`	Letter spacing of the button's text.
`textTransform`	Transforms the button's text (e.g., uppercase, lowercase).