README.md

@ngx-bio-components/button

BioButton buttons are native <button> elements enhanced with Tailwind Design styling.

Native <button> elements are always used in order to provide the most straightforward and accessible experience for users. A <button> element should be used whenever some action is performed.

There are several button variants, each applied as an attribute:

Color Types

Buttons can be colored in terms of the current theme using the color property to set the background color to primary, secondary, or white.

Size Types

Buttons can be sized in terms of the current theme using the size property to set the button size to xs, sm, md, lg and xl.

Accessibility

@ngx-bio-components/button uses native <button> element to ensure an accessible experience by default. A <button> element should be used for any interaction that performs an action on the current page. All standard accessibility best practices for buttons apply to BioButton.

import { BioButtonModule } from '@ngx-bio-components/button';

Directives

BioButton

Selectors: button[bio-button], button[bio-circular-button], button[bio-round-button]

Exported as: bioButton

<button bio-button [color]="color" [size]="size" [disabled]="disabled" [type]="type">Button</button>

Name	Description
@Input() color: 'primary' | 'secondary' | 'white'	primary is default color.
@Input() type: 'button' | 'reset' | 'submit'	submit is default type.
@Input() size: 'xs' | 'sm' | 'md' | 'lg' 'xl'	sm is default size.
@Input() disabled: boolean	Whether the component is disabled.