ListItemBlank
Install
yarn add @ntds/listImport
import { ListItemBlank } from '@ntds/list';Props
| Prop | Type | Default | Description |
|---|---|---|---|
render? | (props) => ReactNode | — | Hook into the top render method of the wrapping element |
children? | ReactNode | — | Children content Children content (optional when using `render`; forwarded into the render callback). |
id? | string | — | Standard HTML-element id |
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. |
className? | string | — | Optional custom className |