List Button React Component

List Button React component represents Framework7's List Block Button element. They are intended to be used inside of the List component.

Usage examples

Minimal Layout

<List>
  <ListButton>Button 1</ListButton>
  <ListButton>Button 2</ListButton>
</List>

Renders to:

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link list-button">Button 1</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">Button 2</a>
    </li>
  </ul>
</div>

Colored Buttons

<List>
  <ListButton color="red">Red Button</ListButton>
  <ListButton color="green">Green Button</ListButton>
</List>

Control Buttons in Inset List

<List inset>
  <ListButton openPanel="left">Open Panel</ListButton>
  <ListButton openPopup="#myPopup">Open Popup</ListButton>
</List>

Properties

Prop Type Default Description
title string Button inner text
color string Link color. One of default colors
Control Links
tabLink string/boolean Enables tab link and specify CSS selector of the target tab (if specified as a string)
openPanel string/boolean Defines panel to open. Can be "left" or "right"
closePanel boolean Closes panel on click
openPopup string/boolean CSS selector of the popup to open on click
closePopup string/boolean CSS selector of the popup to close on click. Or boolean property to close currently opened popup
openPopover string/boolean CSS selector of the popover to open on click
closePopover string/boolean CSS selector of the popover to close on click. Or boolean property to close currently opened popover
openPicker string/boolean CSS selector of the picker to open on click
closePicker string/boolean CSS selector of the picker to close on click. Or boolean property to close currently opened picker
openLoginScreen string/boolean CSS selector of the login screen to open on click
closeLoginScreen string/boolean CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
openSortable string/boolean CSS selector of the Sortable list to open on click
closeSortable string/boolean CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
toggleSortable string/boolean CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list
Navigation / Router Properties
href string # URL of the page to load
view string CSS selector of the View to load the page
noFastClick boolean Disables fast click
external boolean Enable to bypass Framework7's link click handler
back boolean Enables back navigation link