sn-button-x

SnButton

Angular v17 standalone button component easy to use. It is a part of SnUI Library.

Importing to Project

• Run npm i sn-button-x to add it in your project.
• Add to imports array as follows

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, SnButtonComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

• use <sn-button-x>Submit</sn-button-x> element to render a button

Supported properties

Attribute	Supported Type
type	string ex. submit|reset
disabled	boolean
rounded	boolean
filled	boolean
raised	boolean
icon	string ex. coffee
scheme	string ex. primary|warn|danger|success

based on scheme , rounded,filled and raised attribute respective button styles are rendered icon attribute supports font awesome icons

Examples

Text

<sn-button-x>Default</sn-button-x>
<sn-button-x scheme="primary" icon="coffee">Primary</sn-button-x>
<sn-button-x scheme="warn" icon="viruscovid">Warn</sn-button-x>
<sn-button-x scheme="danger" icon="bugs">Danger</sn-button-x>
<sn-button-x scheme="success">Success</sn-button-x>
<sn-button-x disabled>Default Disabled</sn-button-x>

Text Rounded

<sn-button-x rounded>Default</sn-button-x>
<sn-button-x scheme="primary" rounded>Primary</sn-button-x>
<sn-button-x scheme="warn" rounded>Warn</sn-button-x>
<sn-button-x scheme="danger" rounded>Danger</sn-button-x>
<sn-button-x scheme="success" rounded>Success</sn-button-x>
<sn-button-x disabled rounded>Default Disabled</sn-button-x>

Text Filled

<sn-button-x filled>Default</sn-button-x>
<sn-button-x scheme="primary" filled>Primary</sn-button-x>
<sn-button-x scheme="warn" filled>Warn</sn-button-x>
<sn-button-x scheme="danger" filled>Danger</sn-button-x>
<sn-button-x scheme="success" filled>Success</sn-button-x>
<sn-button-x disabled filled>Default Disabled</sn-button-x>

Outlined

<sn-button-x scheme="default-outlined">Default</sn-button-x>
<sn-button-x scheme="primary-outlined">Primary outlined</sn-button-x>
<sn-button-x scheme="warn-outlined">Warn</sn-button-x>
<sn-button-x scheme="danger-outlined">Danger</sn-button-x>
<sn-button-x scheme="success-outlined">Success</sn-button-x>
<sn-button-x scheme="default-outlined" disabled>Default Outlined Disabled</sn-button-x>

Further help

Get in touch with me email: [e-mail] | twitter: @SwapnilNakate7