Components

A button group component is a visual group of buttons used to create a logical set of actions.

Active

In order to manage an active state, add IsActive props on a button.

Type	Default Value
bool	false

<NVButtonGroup>
  <NVButton IsActive="@(_currentState == "sun")" OnClick="@(() => _currentState = "sun")" Icon="sun" />
  <NVButton IsActive="@(_currentState == "moon")" OnClick="@(() => _currentState = "moon")" Icon="moon" />
  <NVButton IsActive="@(_currentState == "devices")" OnClick="@(() => _currentState = "devices")" Icon="devices" />
</NVButtonGroup>

@code {
  private String _currentState = "sun";
}

<div class="nv-btn-group">
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral is-active">
    <i class="nv-icon nv-icon-sun"></i>
  </button>
  
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral">
    <i class="nv-icon nv-icon-moon"></i>
  </button>
  
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral">
    <i class="nv-icon nv-icon-devices"></i>
  </button>
</div>

<nv-buttongroup>
  <nv-button icon="sun" isactive="true"></nv-button>
  <nv-button icon="moon"></nv-button>
  <nv-button icon="devices"></nv-button>
</nv-buttongroup>

<NvButtonGroup>
  <NvButton isActive={true} icon="sun"></NvButton>
  <NvButton icon="moon"></NvButton>
  <NvButton icon="devices"></NvButton>
</NvButtonGroup>

Combination

You can combine button, dropdown and FieldCheck within the FiedGroup.

Checkbox

Combination of Button and Checkbox.

<NVButtonGroup Vertical>
  <NVFieldCheckbox Color="gray-400" @bind-Value="_value" />
  <NVButton Color="gray">Action 1 </NVButton>
</NVButtonGroup>

<div class="nv-btn-group">
  <div class="nv-field nv-field-checkbox">
    <div class="nv-field-input"><input type="checkbox"></div>
  </div>      
  <button class="nv-btn nv-btn-level-1 nv-btn-md neutral">Action 1</button>
</div>

<nv-buttongroup>
  <nv-fieldcheckbox color="gray-400"></nv-fieldcheckbox>
  <nv-button>Action 1</nv-button>
</nv-buttongroup>

<NvButtonGroup>
  <NvFieldCheckbox color="gray-400"></NvFieldCheckbox>
  <NvButton>Action 1</NvButton>
</NvButtonGroup>

Dropdown

Combination of Button and Dropdown.

Type	Default Value

<NVButtonGroup>
  <NVButton Icon="edit" />
  <NVDropdown Label="more">
    <NVList Tag="div" Select Pad="2">
      <div>action 1</div>
      <div>action 2</div>
      <div>action 3</div>    
    </NVList>
  </NVDropdown>
</NVButtonGroup>

<div class="nv-btn-group">
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral">
    <i class="nv-icon nv-icon-edit"></i>
  </button>
  
  <div class="nv-dropdown" data-js-doc-dropdown="">
    <div class="nv-dropdown-activator">
      <button class="nv-btn nv-btn-level-1 nv-btn-md neutral">
        <span>more</span>
        <i class="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs"></i>
      </button>
    </div>
    <div class="nv-dropdown-wrapper nv-panel nv-panel-level-2" style="opacity: 1; transform:translate(45px, 10px)">
      <div class="nv-list nv-list-select neutral cpy-2 cpx-4">
        <div>Actions 1</div>
        <div>Actions 2</div>
        <div>Actions 3</div>
      </div>
    </div>
  </div>
</div>

<nv-buttongroup>
    <nv-button icon="edit"></nv-button>
    <nv-dropdown>
      <nv-list select>
        <nv-listitem>Item 1</nv-listitem>
        <nv-listitem>Item 2</nv-listitem>
      </nv-list>
    </nv-dropdown>
</nv-buttongroup>

<NvButtonGroup>
  <NvButton icon="edit"></NvButton>
  <NvDropDown>
    <NvList select>
      <NvListItem>Item 1</NvListItem>
      <NvListItem>Item 2</NvListItem>
    </NvList>
  </NvDropDown>
</NvButtonGroup>

Parameters

Vertical

Vertical change the direction of the layout direction to vertical.

Type	Default Value
bool	false

<NVButtonGroup Vertical>
  <NVButton Icon="sun" />
  <NVButton Icon="moon" />
  <NVButton Icon="devices" />
</NVButtonGroup>

<div class="nv-btn-group nv-btn-group-vertical">
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral">
    <i class="nv-icon nv-icon-sun"></i>
  </button>
  
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral">
    <i class="nv-icon nv-icon-moon"></i>
  </button>
  
  <button class="nv-btn nv-btn-level-1 nv-btn-icon nv-btn-md neutral">
    <i class="nv-icon nv-icon-devices"></i>
  </button>
</div>

<nv-buttongroup vertical>
    <nv-button icon="sun"></nv-button>
    <nv-button icon="moon"></nv-button>
    <nv-button icon="devices"></nv-button>
</nv-buttongroup>

<NvButtonGroup vertical={true}>
  <NvButton icon="sun"></NvButton>
  <NvButton icon="moon"></NvButton>
  <NvButton icon="devices"></NvButton>
</NvButtonGroup>

Button Group