Skip to content
Twentyfirst UIPro

Modal

Overlays · Button, Input, Modal

View as Markdown

Props

Button

PropTypeNotes
variant?"primary" | "secondary" | "soft" | "ghost" | "danger" | "danger-solid"
size?"md" | "sm"
icon?IconName
iconRight?IconName
disabled?boolean
type?"button" | "submit" | "reset"
onClick?(e: MouseEvent<HTMLButtonElement>) => void
children?ReactNode
asChild?booleanRender the single child element (a link, a router Link) with the button's look instead of a <button>.
id?string
name?stringForm field name and value, sent with the form when this button submits it.
value?string
form?stringThe id of the form this button belongs to, when it sits outside it.
title?string
tabIndex?number
autoFocus?boolean
aria-label?string
aria-labelledby?string
aria-describedby?string
aria-expanded?boolean | "true" | "false"For disclosure and menu triggers: whether what the button controls is open.
aria-controls?string
aria-haspopup?boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog"
aria-pressed?boolean | "true" | "false" | "mixed"For toggle buttons.
aria-current?boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Input

PropTypeNotes
type?string
placeholder?string
value?string
defaultValue?string
disabled?boolean
onChange?(e: ChangeEvent<HTMLInputElement>) => void
label?string
hint?string
error?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Modal

PropTypeNotes
titlestringRequired
text?string
icon?IconName
tint?Tint
actions?ReactNode[]
onClose?() => void
style?CSSProperties
children?ReactNode
open?booleanOptional: with `open` the component stays mounted while it animates out; without it, render it only while open.
className?stringExtra class on the root element.