Button Toggle

Design Code Toggle 1 Toggle 2 Toggle 3

Attribute:emptyDefault

Toggle 1 Toggle 2 Toggle 3 Toggle 1 Toggle 2 Toggle 3 
<nile-button-toggle-group emptyDefault>
    <nile-button-toggle value="option1">
      <nile-icon name="info2" size="14" slot="prefix"> </nile-icon>
      Toggle 1
    </nile-button-toggle>
    <nile-button-toggle value="option2">
      <nile-icon name="info2" size="14" slot="prefix"> </nile-icon>
      Toggle  2
    </nile-button-toggle>
    <nile-button-toggle value="option3">
      <nile-icon name="info2" size="14" slot="prefix"> </nile-icon>
      Toggle  3
    </nile-button-toggle>
</nile-button-toggle-group>

Attribute: disabled

Toggle 1 Toggle 2 Toggle 3 
<nile-button-toggle-group disabled>
    <nile-button-toggle value="option1">
      <nile-icon name="info2" size="14" slot="prefix"> </nile-icon>
      Toggle 1
    </nile-button-toggle>
    <nile-button-toggle value="option2">
      <nile-icon name="info2" size="14" slot="prefix"> </nile-icon>
      Toggle  2
    </nile-button-toggle>
    <nile-button-toggle value="option3">
      <nile-icon name="info2" size="14" slot="prefix"> </nile-icon>
      Toggle  3
    </nile-button-toggle>
</nile-button-toggle-group>

Button Toggle Group Attributes & Properties

Name Description Type Default
disabled Disables the selection. boolean false

Nile Button Toggle Group: Attributes & Properties

Name Description Type Default
disabled Disables the button. boolean false
multiple Allows multiple selection boolean false
value The value for selected button/buttons String | String[] ''|[]

Nile Button Toggle Group: Attributes & Properties

Name Description Type Default
disabled Disables the button. boolean false
disableUserInput Disables the user input (click). boolean false
active Disables the button. boolean false
emptyDefault By default if no value is passed the first button will be set to active. To have none selection by default pass emptyDefault as true boolean false

Button Group Events

Name Description Event Detail
nile-change Emitted when the button was selected detail.value ( string | string[] based on multiple prop)

Nile Button Toggle: Slots

Name Description
(default) The button's label.
prefix A presentational prefix icon or similar element.