Button

Examples

primary primary primary primary 
<nxt-button appearance="small">primary</nxt-button>
<nxt-button>primary</nxt-button>
<nxt-button appearance="large">primary</nxt-button>
<nxt-button disabled>primary</nxt-button>
 secondary secondary secondary secondary 
<nxt-button appearance="secondary small">secondary</nxt-button>
<nxt-button appearance="secondary">secondary</nxt-button>
<nxt-button appearance="secondary large">secondary</nxt-button>
<nxt-button appearance="secondary" disabled>secondary</nxt-button>
 tertiary tertiary tertiary tertiary 
<nxt-button appearance="tertiary small">tertiary</nxt-button>
<nxt-button appearance="tertiary">tertiary</nxt-button>
<nxt-button appearance="tertiary large">tertiary</nxt-button>
<nxt-button appearance="tertiary" disabled>tertiary</nxt-button>
 orange orange orange 
<nxt-button appearance="emphasis small">orange</nxt-button>
<nxt-button appearance="emphasis">orange</nxt-button>
<nxt-button appearance="emphasis large">orange</nxt-button>
 green green green 
<nxt-button appearance="cta small">green</nxt-button>
<nxt-button appearance="cta">green</nxt-button>
<nxt-button appearance="cta large">green</nxt-button>
 primary secondary tertiary 
<nxt-button appearance="primary danger">primary</nxt-button>
<nxt-button appearance="secondary danger">secondary</nxt-button>
<nxt-button appearance="tertiary danger">tertiary</nxt-button>
primary secondary tertiary primary secondary tertiary 
<div style="background: currentColor; padding: 24px;">
  <nxt-button appearance="primary negative">primary</nxt-button>
  <nxt-button appearance="secondary negative">secondary</nxt-button>
  <nxt-button appearance="tertiary negative">tertiary</nxt-button>
  <nxt-button appearance="primary negative" disabled>primary</nxt-button>
  <nxt-button appearance="secondary negative" disabled>secondary</nxt-button>
  <nxt-button appearance="tertiary negative" disabled>tertiary</nxt-button>
</div>

import '@nxt/ndbx-components/button';

NxtButton

This is a button element. Its appearance can be changed via the appearance attribute. It will behave like a link when the href attribute is set.

Tag: nxt-button

Slots

Name Description
default

The content of this button.

Properties

Property Attribute Type Default Description
appearance appearance NxtButtonAppearance 'primary'

Specifies the appearance of this button.
disabled disabled boolean false

Disables the button preventing all user interaction.
href href string ''

When set the button will turn into a link. Similar to the native a[href] attribute.
target target '_blank' | '_parent' | '_self' | '_top' '_self'

Only works when href is set. Similar to the a[href] attribute.
type type 'submit' | 'button' 'submit'

The type of this button. Similar to the native button[type] attribute.

Type Aliases

NxtButtonAppearance

'primary' | 'secondary' | 'tertiary' | 'cta' | 'emphasis'

NxtButtonSize

'small' | 'small-medium' | 'medium' | 'large'