Components

Button communicates the action that will occur when the user touches them. The buttons component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.

Color

Color define the button color.

Type	Default Value
string	null

<NVStack Gutter="4" MB="4" Overflow="auto">
  <NVButton Color="neutral">Neutral </NVButton>
  <NVButton Color="primary">Primary </NVButton>
  <NVButton Color="secondary">Secondary </NVButton>
  <NVButton Color="error">Error </NVButton>
</NVStack>
<NVStack Gutter="4" MB="4" Overflow="auto">
  <NVButton Level="2" Color="neutral">Neutral </NVButton>
  <NVButton Level="2" Color="primary">Primary </NVButton>
  <NVButton Level="2" Color="secondary">Secondary </NVButton>
  <NVButton Level="2" Color="error">Error </NVButton>
</NVStack>
<NVStack Gutter="4" Overflow="auto">
  <NVButton Level="3" Color="neutral">Neutral </NVButton>
  <NVButton Level="3" Color="primary">Primary </NVButton>
  <NVButton Level="3" Color="secondary">Secondary </NVButton>
  <NVButton Level="3" Color="error">Error </NVButton>
</NVStack>

<div class="nv-stack gutter-x-4 mb-4 overflow-auto">
  <button class="nv-btn nv-btn-level-1 nv-btn-md neutral">Neutral</button>
  <button class="nv-btn nv-btn-level-1 nv-btn-md primary">Primary</button>
  <button class="nv-btn nv-btn-level-1 nv-btn-md secondary">Secondary</button>
  <button class="nv-btn nv-btn nv-btn-level-1 nv-btn-md error">Error</button>
</div>
<div class="nv-stack gutter-x-4 mb-4 overflow-auto">
  <button class="nv-btn nv-btn-level-2 nv-btn-md neutral">Neutral</button>
  <button class="nv-btn nv-btn-level-2 nv-btn-md primary">Primary</button>
  <button class="nv-btn nv-btn-level-2 nv-btn-md secondary">Secondary</button>
  <button class="nv-btn nv-btn nv-btn-level-2 nv-btn-md error">Error</button>
</div>
<div class="nv-stack gutter-x-4 overflow-auto">
  <button class="nv-btn nv-btn-level-3 nv-btn-md neutral">Neutral</button>
  <button class="nv-btn nv-btn-level-3 nv-btn-md primary">Primary</button>
  <button class="nv-btn nv-btn-level-3 nv-btn-md secondary">Secondary</button>
  <button class="nv-btn nv-btn nv-btn-level-3 nv-btn-md error">Error</button>
</div>

<nv-stack gutter="4" mb="4" overwritten="auto">
  <nv-button color="neutral">Neutral</nv-button>
  <nv-button color="primary">Primary</nv-button>
  <nv-button color="secondary">Secondary</nv-button>
  <nv-button color="error">Error</nv-button>
</nv-stack>
<nv-stack gutter="4" mb="4" overwritten="auto">
  <nv-button level="2" color="neutral">Neutral</nv-button>
  <nv-button level="2" color="primary">Primary</nv-button>
  <nv-button level="2" color="secondary">Secondary</nv-button>
  <nv-button level="2" color="error">Error</nv-button>
</nv-stack>
<nv-stack gutter="4" overwritten="auto">
  <nv-button level="3" color="neutral">Neutral</nv-button>
  <nv-button level="3" color="primary">Primary</nv-button>
  <nv-button level="3" color="secondary">Secondary</nv-button>
  <nv-button level="3" color="error">Error</nv-button>
</nv-stack>

<NvStack gutter={4} mb={4} overflow="auto">
  <NvButton color="neutral"> Neutral </NvButton>
  <NvButton color="primary"> Primary </NvButton>
  <NvButton color="secondary"> Secondary </NvButton>
  <NvButton color="error"> Error </NvButton>
</NvStack>
<NvStack gutter={4} mb={4} overflow="auto">
  <NvButton color="neutral" level="2"> Neutral </NvButton>
  <NvButton color="primary" level="2"> Primary </NvButton>
  <NvButton color="secondary" level="2"> Secondary </NvButton>
  <NvButton color="error" level="2"> Error </NvButton>
</NvStack>
<NvStack gutter={4} overflow="auto">
  <NvButton color="neutral" level="3"> Neutral </NvButton>
  <NvButton color="primary" level="3"> Primary </NvButton>
  <NvButton color="secondary" level="3"> Secondary </NvButton>
  <NvButton color="error" level="3"> Error </NvButton>
</NvStack>

Cta

Cta defines if the button is a "Call To Action".
This kind of button got a pill shape and 3 sizes: Medium, Large and XLarge.

Type	Default Value
string	null

<NVStack Gutter="4" Overflow="auto">
  <NVButton Cta>Level 1 </NVButton>
  <NVButton Cta Level="2">Level 2 </NVButton>
  <NVButton Cta Level="3">Level 3 </NVButton>
</NVStack>

<div class="nv-stack gutter-x-4 mb-4 overflow-auto">
  <button class="nv-btn nv-btn-cta nv-btn-level-1 nv-btn-md">Level 1</button>
  <button class="nv-btn nv-btn-cta nv-btn-level-2 nv-btn-md">Level 2</button>
  <button class="nv-btn nv-btn-cta nv-btn-level-3 nv-btn-md">Level 3</button>
</div>

<nv-stack gutter="4">
    <nv-button cta>CTA Level 1</nv-button>
    <nv-button level="2" cta>CTA Level 2</nv-button>
    <nv-button level="3" cta>CTA Level 3</nv-button>
  </nv-stack>

<NvStack gutter={4}>
  <NvButton cta> CTA Level 1 </NvButton>
  <NvButton cta level="2"> CTA Level 2 </NvButton>
  <NvButton cta level="3"> CTA Level 3 </NvButton>
</NvStack>

Full

Full set the button width to 100%. It's act as WFull.

Type	Default Value
bool	false

<NVButton Full>Full </NVButton>

<button class="nv-btn nv-btn-level-1 nv-btn-md neutral w-full">Full</button>

<nv-button full>Full</nv-button>

<NvButton full>
  Full
</NvButton>

Icon

Transform the button to a Button Icon.

Type	Default Value
string	null

<NVButton Icon="search" />

<button class="nv-btn nv-btn-level-1 nv-btn-md neutral nv-btn-icon">
  <i class="nv-icon nv-icon-search"></i>
</button>

<nv-button icon="search">Icon</nv-button>

<NvButton icon="search">
  Icon
</NvButton>

Large

Set the size of the button to lg.

Type	Default Value
bool	false

<NVButton Cta Large>Large </NVButton>

<button class="nv-btn nv-btn-level-1 nv-btn-cta nv-btn-lg neutral">Large</button>

<nv-button cta large>Large</nv-button>

<NvButton cta large> Large </NvButton>

LeadIcon

Add the icon selected by LeadIcon value after the text of the button.

Type	Default Value
string	null

<NVButton LeadIcon="search">LeadIcon </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral">
  <i class="nv-btn-lead-icon nv-icon nv-icon-search"></i>
   <span>LeadIcon</span>
</button>

<nv-button leadicon="search">Lead Icon</nv-button>

<NvButton leadIcon="search">Lead Icon</NvButton>

Level

Level define the ui style of the button.

Type	Default Value
string	1

<NVStack Gutter="4" MB="4">
  <NVButton>Default </NVButton>
  <NVButton Level="1">Level 1 </NVButton>
  <NVButton Level="2">Level 2 </NVButton>
  <NVButton Level="3">Level 3 </NVButton>
</NVStack>
<NVStack Gutter="4">
  <NVButton>Default CTA </NVButton>
  <NVButton Cta Level="1">CTA Level 1 </NVButton>
  <NVButton Cta Level="2">CTA Level 2 </NVButton>
  <NVButton Cta Level="3">CTA Level 3 </NVButton>
</NVStack>

<div class="nv-stack gutter-x-4 mb-4">
  <button class="nv-btn nv-btn-level-1 nv-btn-md neutral">Default</button>
  <button class="nv-btn nv-btn-level-1 nv-btn-md neutral">Level 1</button>
  <button class="nv-btn nv-btn-level-2 nv-btn-md neutral">Level 2</button>
  <button class="nv-btn nv-btn-level-3 nv-btn-md neutral">Level 3</button>  
</div>
<div class="nv-stack gutter-x-4">
  <button class="nv-btn nv-btn-level-1 nv-btn-md nv-btn-cta">CTA Default</button>
  <button class="nv-btn nv-btn-level-1 nv-btn-md nv-btn-cta">CTA Level 1</button>
  <button class="nv-btn nv-btn-level-2 nv-btn-md nv-btn-cta">CTA Level 2</button>
  <button class="nv-btn nv-btn-level-3 nv-btn-md nv-btn-cta">CTA Level 3</button>  
</div>

<nv-stack gutter="4" mb="4">
      <nv-button>Default</nv-button>
      <nv-button level="1">Level 1</nv-button>
      <nv-button level="2">Level 2</nv-button>
      <nv-button level="3">Level 3</nv-button>
</nv-stack>
<nv-stack gutter="4" mb="4">
      <nv-button cta>CTA Default</nv-button>
      <nv-button level="1" cta>CTA Level 1</nv-button>
      <nv-button level="2" cta>CTA Level 2</nv-button>
      <nv-button level="3" cta>CTA Level 3</nv-button>
</nv-stack>

<NvStack gutter={4} mb={4}>
  <NvButton> Default </NvButton>
  <NvButton level="1"> Level 1 </NvButton>
  <NvButton level="2"> Level 2 </NvButton>
  <NvButton level="3"> Level 3 </NvButton>
</NvStack>
<NvStack gutter={4} mb={4}>
  <NvButton cta> CTA Default </NvButton>
  <NvButton cta level="1"> CTA Level 1 </NvButton>
  <NvButton cta level="2"> CTA Level 2 </NvButton>
  <NvButton cta level="3"> CTA Level 3 </NvButton>
</NvStack>

Loading

Loading say to user that an async action is performed.
An loading animation will replace the text of the button when true.

Type	Default Value
bool	false

<NVButton Loading>Loading </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral nv-btn-loading">Loading</button>

<nv-button loading>Loading</nv-button>

<NvButton loading>Loading</NvButton>

Size

Define the size of the button.
Classic button can have a size of "xs", "sm" or "md" when Cta buttons can have a size of "md", "lg" or "xl".

Type	Default Value
string	null

<NVStack Gutter="4" MB="4">
  <NVButton Size="@Size.XSMALL">XSmall</NVButton>
  <NVButton Size="@Size.SMALL">Small</NVButton>
  <NVButton Size="@Size.Medium">Medium</NVButton>
</NVStack>
<NVStack Gutter="4">
  <NVButton Cta Size="@Size.Medium">CTA Medium</NVButton>
  <NVButton Cta Size="@Size.LARGE">CTA Large</NVButton>
  <NVButton Cta Size="@Size.XLARGE">CTA XLarge</NVButton>
</NVStack>

<div class="nv-stack items-center justify-center mb-4 gutter-x-4">
  <button class="nv-btn nv-btn-level-1 nv-btn-xs neutral">XSmall</button>
  <button class="nv-btn nv-btn-level-1 nv-btn-sm neutral">Small</button>
  <button class="nv-btn nv-btn-md nv-btn-level-1 neutral">Medium</button>
</div>
<div class="nv-stack items-center justify-center gutter-x-4">
  <button class="nv-btn nv-btn-md nv-btn-level-1 nv-btn-cta">CTA Medium</button>
  <button class="nv-btn nv-btn-lg nv-btn-level-1 nv-btn-cta">CTA Large</button>
  <button class="nv-btn nv-btn-xl nv-btn-level-1 nv-btn-cta">CTA XLarge</button>
</div>

<nv-stack gutter="4" mb="4">
  <nv-button size="xs">XSmall</nv-button>
  <nv-button size="sm">Small</nv-button>
  <nv-button size="md">Medium</nv-button>
</nv-stack>
<nv-stack gutter="4" mb="4">
  <nv-button cta size="md">CTA Medium</nv-button>
  <nv-button cta size="lg">CTA Large</nv-button>
  <nv-button cta size="xl">CTA XLarge</nv-button>
</nv-stack>

<NvStack gutter={4}>
  <NvButton size="md"> md </NvButton>
  <NvButton size="xs"> XSmall </NvButton>
  <NvButton size="sm"> Small </NvButton>
  <NvButton size="md"> Medium </NvButton>
</NvStack>

Small

Set the size of the button to sm.

Type	Default Value
bool	false

<NVButton Small>Small</NVButton>

<button class="nv-btn nv-btn-level-1 nv-btn-sm neutral">Small</button>

<nv-button small>Small</nv-button>

<NvButton small>Small</NvButton>

TaiIcon

Add the icon selected by TaiIcon value after the text of the button.

Type	Default Value
string	null

<NVButton TaiIcon="search">TaiIcon</NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral">
   <span>TaiIcon</span>
   <i class="nv-btn-tail-icon nv-icon nv-icon-search"></i>
</button>

<nv-button tailicon="search">Tail Icon</nv-button>

<NvButton tailIcon="search">Tail Icon</NvButton>

Type

Type define the button kind.

Type	Default Value
string	false

<NVStack Gutter="4">
  <NVButton>Default</NVButton>
  <NVButton Type="button">default or button</NVButton>
  <NVButton Type="reset">reset</NVButton>
  <NVButton Type="submit">submit</NVButton>
</NVStack>

<div class="nv-stack gutter-x-4">
  <button class="nv-btn nv-btn-md nv-btn-level-1 neutral" type="button">default or button</button>
  <button class="nv-btn nv-btn-md nv-btn-level-1 neutral" type="reset">reset</button>
  <button class="nv-btn nv-btn-md nv-btn-level-1 neutral" type="submit">submit</button>  
</div>

<nv-stack gutter="4">
  <nv-button>Default</nv-button>
  <nv-button type="button">Button</nv-button>
  <nv-button type="reset">Reset</nv-button>
  <nv-button type="submit">Submit</nv-button>
</nv-stack>

<NvStack gutter={4} mb={4}>
  <NvButton type="button">Button</NvButton>
  <NvButton type="reset">Submit</NvButton>
  <NvButton type="submit">Reset</NvButton>
</NvStack>

XLarge

Set the size of the button to xl.

Type	Default Value
bool	false

<NVButton Cta XLarge>XLarge</NVButton>

<button class="nv-btn nv-btn nv-btn-level-1 nv-btn-xl nv-btn-cta neutral">XLarge</button>

<nv-button  xlarge>XLarge</nv-button>

<NvButton xLarge>XLarge</NvButton>

XSmall

Set the size of the button to xs.

Type	Default Value
bool	false

<NVButton XSmall>XSmall</NVButton>

<button class="nv-btn nv-btn-level-1 nv-btn-xs neutral">XSmall</button>

<nv-button xsmall>XSmall</nv-button>

<NvButton xSmall>XSmall</NvButton>