ListItemBlank

Install

yarn add @ntds/list

Import

import { ListItemBlank } from '@ntds/list';

Props

ListItemBlank

PropType & Description
id
string

Standard HTML-element id

className
string

Optional custom className

title
string

Standard HTML-title attribute

type
"button" | "submit" | "reset"

Default behavior of the standard HTML-button.

Note: Will be omitted when using the render-prop.

disabled
boolean

Disables the button both visually and interactively

tabIndex
0 | -1

Standard HTML-tabIndex -1 = not focusable 0 = focusable, natural order

elementRef
Ref<HTMLButtonElement>

Get the DOM-reference from the button-element

onClick
MouseEventHandler<HTMLElement>

Standard click event Optional click handler. For the BlankButton variant this is already part of BlankButtonProps. For the custom render variant, we forward it inside the render callback.

hoverAffordance
"md" | "lg" | "xl"

Whether or not to show hover-effect.

Has no effect when flat is set to true.

twFocusKeyboard
string

Override the standard keyboard focus style of the blank button

Default: focus-keyboard:ring-6 focus-keyboard:ring-blue-400

showPointerOnHover
boolean

Whether to show a pointer cursor on hover. Defaults to false. If a button is being rendered, it will always show a pointer cursor on hover regardless of this prop, as long the button is not receiving a custom className.

render
(props: ListItemWrapperRenderProps) => Element

Hook into the top render method of the wrapping element

children
ReactNode

Children content

This guide is based on version: 3.0.1