UI & Componentslimited
Toast and Toaster
Toast and Toaster: anatomy, keyboard behavior, state, and theming in Askr.
Example
import { Toast, ToastDescription, ToastHost, ToastTitle } from '@askrjs/themes/components';
<ToastHost>
<Toast open={saved()} onOpenChange={setSaved}>
<ToastTitle>Project saved</ToastTitle>
<ToastDescription>Your changes are now visible.</ToastDescription>
</Toast>
</ToastHost>Try Toast
Dismiss transient feedback from the viewport.
Published props
Generated from the TypeScript declarations shipped by the installed package. Named types in the Type column define the accepted values.
ToastActionAsChildProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((event: PressEvent) => void) | undefined; | — | — |
ref | ref?: Ref<Element>; | — | — |
type | type?: undefined; | — | — |
ToastActionProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((event: PressEvent) => void) | undefined; | — | — |
ref | ref?: Ref<HTMLButtonElement>; | — | — |
type | type?: "button" | "submit" | "reset" | undefined; | — | — |
ToastCloseAsChildProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((event: PressEvent) => void) | undefined; | — | — |
ref | ref?: Ref<Element>; | — | — |
type | type?: undefined; | — | — |
ToastCloseProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((event: PressEvent) => void) | undefined; | — | — |
ref | ref?: Ref<HTMLButtonElement>; | — | — |
type | type?: "button" | "submit" | "reset" | undefined; | — | — |
ToastDescriptionAsChildProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<Element>; | — | — |
ToastDescriptionProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
ToastHostOwnProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
duration | duration?: number | undefined; | — | — |
id | id?: string | undefined; | — | — |
ToastHostProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
duration | duration?: number | undefined; | — | — |
id | id?: string | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
ToastOwnProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
defaultOpen | defaultOpen?: boolean | undefined; | — | — |
duration | duration?: number | undefined; | — | — |
id | id?: string | undefined; | — | — |
onOpenChange | onOpenChange?: ((open: boolean) => void) | undefined; | — | — |
open | open?: boolean | undefined; | — | — |
variant | variant?: ToastVariant | undefined; | — | — |
ToastProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
defaultOpen | defaultOpen?: boolean | undefined; | — | — |
duration | duration?: number | undefined; | — | — |
id | id?: string | undefined; | — | — |
onOpenChange | onOpenChange?: ((open: boolean) => void) | undefined; | — | — |
open | open?: boolean | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
variant | variant?: ToastVariant | undefined; | — | — |
ToastTitleAsChildProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<Element>; | — | — |
ToastTitleProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
ToastViewportAsChildProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<Element>; | — | — |
ToastViewportProps
Import from @askrjs/themes/toast.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
AlertProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | actions?: unknown; | — | — |
children | children?: unknown; | — | — |
description | description?: unknown; | — | — |
dismissLabel | dismissLabel?: string | undefined; | — | — |
icon | icon?: unknown; | — | — |
onDismiss | onDismiss?: (() => void) | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
title | title?: unknown; | — | — |
titleAs | titleAs?: AlertHeadingTag | undefined; | — | — |
variant | variant?: AlertVariant | undefined; | — | — |
AspectRatioAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ratio | ratio?: string | number | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
style | style?: unknown; | — | — |
AspectRatioProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ratio | ratio?: string | number | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
style | style?: unknown; | — | — |
BadgeAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<unknown>; | — | — |
variant | variant?: BadgeVariant | undefined; | — | — |
BadgeOwnProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
variant | variant?: BadgeVariant | undefined; | — | — |
BadgeProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLSpanElement>; | — | — |
variant | variant?: BadgeVariant | undefined; | — | — |
BlockAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
asChild | asChild: true; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children: JSXElement; | — | — |
className | className?: string | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
BlockDivProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: "div" | undefined; | — | — |
asChild | asChild?: false | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
BlockElementProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: TElement | undefined; | — | — |
asChild | asChild?: false | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
BlockNativeProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: "a" | "article" | "aside" | "div" | "form" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul" | undefined; | — | — |
asChild | asChild?: false | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | ((() => IntrinsicClassValue) & string) | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
BlockOwnProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: BlockElement | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
BlockProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
asChild | asChild?: boolean | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | ((() => IntrinsicClassValue) & string) | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
BlockSpanProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: "span" | undefined; | — | — |
asChild | asChild?: false | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
ButtonAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: ButtonAsChildElement; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((e: PressEvent) => void) | undefined; | — | — |
ref | ref?: Ref<Element>; | — | — |
size | size?: ButtonSize | undefined; | — | — |
type | type?: undefined; | — | — |
variant | variant?: ButtonVariant | undefined; | — | — |
width | width?: ButtonWidth | undefined; | — | — |
ButtonGroupProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
attached | attached?: boolean | undefined; | — | — |
children | children?: unknown; | — | — |
data-responsive | data-responsive?: "true" | "false" | undefined; | — | Stack at phone width. Defaults to `"true"` for attached groups without an `orientation`. |
orientation | orientation?: ButtonGroupOrientation | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
ButtonNativeProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((e: PressEvent) => void) | undefined; | — | — |
ref | ref?: Ref<HTMLButtonElement>; | — | — |
size | size?: ButtonSize | undefined; | — | — |
type | type?: "button" | "submit" | "reset" | undefined; | — | — |
variant | variant?: ButtonVariant | undefined; | — | — |
width | width?: ButtonWidth | undefined; | — | — |
ButtonProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: boolean | undefined; | — | — |
children | children?: unknown; | — | — |
disabled | disabled?: boolean | undefined; | — | — |
onPress | onPress?: ((e: PressEvent) => void) | undefined; | — | — |
ref | ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined; | — | — |
size | size?: ButtonSize | undefined; | — | — |
type | type?: "button" | "submit" | "reset" | undefined; | — | — |
variant | variant?: ButtonVariant | undefined; | — | — |
width | width?: ButtonWidth | undefined; | — | — |
CardActionProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
CardContentProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
CardDescriptionProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLParagraphElement>; | — | — |
CardFooterProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
CardHeaderProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
CardProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
variant | variant?: CardVariant | undefined; | — | — |
CardTitleProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLHeadingElement>; | — | — |
titleAs | titleAs?: CardTitleHeadingTag | undefined; | — | Choose the level that follows the surrounding document hierarchy. |
CatalogComponentProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
as | as?: keyof JSX.IntrinsicElements | undefined; | — | — |
asChild | asChild?: boolean | undefined; | — | — |
children | children?: unknown; | — | — |
class | class?: string | undefined; | — | — |
ref | ref?: Ref<TElement>; | — | — |
CenterProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: undefined; | — | — |
asChild | asChild?: unknown; | — | — |
background | background?: unknown; | — | — |
border | border?: unknown; | — | — |
borderBottom | borderBottom?: unknown; | — | — |
borderRight | borderRight?: unknown; | — | — |
borderTop | borderTop?: unknown; | — | — |
center | center?: unknown; | — | — |
children | children?: unknown; | — | — |
direction | direction?: unknown; | — | — |
gap | gap?: unknown; | — | — |
grow | grow?: unknown; | — | — |
height | height?: unknown; | — | — |
hide | hide?: unknown; | — | — |
justify | justify?: undefined; | — | — |
margin | margin?: unknown; | — | — |
marginX | marginX?: unknown; | — | — |
marginY | marginY?: unknown; | — | — |
maxHeight | maxHeight?: unknown; | — | — |
maxWidth | maxWidth?: unknown; | — | — |
minHeight | minHeight?: unknown; | — | — |
minWidth | minWidth?: unknown; | — | — |
padding | padding?: unknown; | — | — |
paddingX | paddingX?: unknown; | — | — |
paddingY | paddingY?: unknown; | — | — |
radius | radius?: unknown; | — | — |
ref | ref?: unknown; | — | — |
rowFrom | rowFrom?: unknown; | — | — |
shadow | shadow?: unknown; | — | — |
shrink | shrink?: unknown; | — | — |
sticky | sticky?: unknown; | — | — |
top | top?: unknown; | — | — |
width | width?: unknown; | — | — |
wrap | wrap?: unknown; | — | — |
zIndex | zIndex?: unknown; | — | — |
CloseNativeProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
label | label?: string | undefined; | — | — |
CloseOwnProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
label | label?: string | undefined; | — | — |
ClusterProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: unknown; | — | — |
asChild | asChild?: unknown; | — | — |
background | background?: unknown; | — | — |
border | border?: unknown; | — | — |
borderBottom | borderBottom?: unknown; | — | — |
borderRight | borderRight?: unknown; | — | — |
borderTop | borderTop?: unknown; | — | — |
center | center?: unknown; | — | — |
children | children?: unknown; | — | — |
direction | direction?: undefined; | — | — |
gap | gap?: unknown; | — | — |
grow | grow?: unknown; | — | — |
height | height?: unknown; | — | — |
hide | hide?: unknown; | — | — |
justify | justify?: unknown; | — | — |
margin | margin?: unknown; | — | — |
marginX | marginX?: unknown; | — | — |
marginY | marginY?: unknown; | — | — |
maxHeight | maxHeight?: unknown; | — | — |
maxWidth | maxWidth?: unknown; | — | — |
minHeight | minHeight?: unknown; | — | — |
minWidth | minWidth?: unknown; | — | — |
padding | padding?: unknown; | — | — |
paddingX | paddingX?: unknown; | — | — |
paddingY | paddingY?: unknown; | — | — |
radius | radius?: unknown; | — | — |
ref | ref?: unknown; | — | — |
rowFrom | rowFrom?: undefined; | — | — |
shadow | shadow?: unknown; | — | — |
shrink | shrink?: unknown; | — | — |
sticky | sticky?: unknown; | — | — |
top | top?: unknown; | — | — |
width | width?: unknown; | — | — |
wrap | wrap?: undefined; | — | — |
zIndex | zIndex?: unknown; | — | — |
CommandPaletteContentProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
closeOnBackdrop | closeOnBackdrop?: boolean | undefined; | — | — |
closeOnEscape | closeOnEscape?: boolean | undefined; | — | — |
description | description?: string | undefined; | — | — |
initialFocus | initialFocus?: string | false | (() => HTMLElement | null) | undefined; | — | — |
onEscapeKeyDown | onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined; | — | — |
onInteractOutside | onInteractOutside?: ((event: Event) => void) | undefined; | — | — |
onPointerDownOutside | onPointerDownOutside?: ((event: PointerEvent) => void) | undefined; | — | — |
overlayProps | overlayProps?: DialogOverlayProps | undefined; | — | — |
title | title: string; | — | — |
CommandPaletteLinkProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
closeOnSelect | closeOnSelect?: boolean | undefined; | — | — |
onBeforeNavigate | onBeforeNavigate?: ((event: Event) => void) | undefined; | — | — |
CommandPaletteListProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLUListElement>; | — | — |
ContainerProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: "div" | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | undefined; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
size | size?: BlockSize | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
CopyButtonProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
failureMessage | failureMessage?: string | undefined; | — | — |
label | label: string; | — | — |
resetAfter | resetAfter?: number | undefined; | — | — |
successMessage | successMessage?: string | undefined; | — | — |
text | text: string; | — | — |
DialogProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
defaultOpen | defaultOpen?: boolean | undefined; | — | — |
id | id?: string | undefined; | — | — |
modal | modal?: boolean | undefined; | — | — |
onOpenChange | onOpenChange?: ((open: boolean) => void) | undefined; | — | — |
open | open?: boolean | undefined; | — | — |
EmptyStateProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
action | action?: unknown; | — | — |
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
as | as?: "div" | undefined; | — | — |
asChild | asChild?: false | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
className | className?: string | undefined; | — | — |
description | description?: unknown; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
icon | icon?: unknown; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
title | title?: unknown; | — | — |
titleAs | titleAs?: EmptyStateHeadingTag | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
FieldErrorProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLParagraphElement>; | — | — |
FieldHintProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLParagraphElement>; | — | — |
FieldProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
invalid | invalid?: boolean | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
FooterContentProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
FooterDescriptionProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLParagraphElement>; | — | — |
FooterLinkProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLAnchorElement>; | — | — |
FooterLinksProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
FooterSectionProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
FooterTitleProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLHeadingElement>; | — | — |
GridProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<GridAlign> | undefined; | — | — |
as | as?: TElement | undefined; | — | — |
children | children?: unknown; | — | — |
columns | columns?: ResponsiveValue<GridColumns> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
HeaderProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
position | position?: "sticky" | "static" | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
HeadingProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
font | font?: TextFont | undefined; | — | — |
level | level: HeadingLevel; | — | — |
numeric | numeric?: TextNumeric | undefined; | — | — |
ref | ref?: Ref<HTMLHeadingElement>; | — | — |
size | size?: HeadingSize | undefined; | — | — |
tone | tone?: TextTone | undefined; | — | — |
truncate | truncate?: boolean | undefined; | — | — |
weight | weight?: TextWeight | undefined; | — | — |
wrap | wrap?: TextWrap | undefined; | — | — |
InputGroupProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
attached | attached?: boolean | undefined; | — | — |
children | children?: unknown; | — | — |
orientation | orientation?: InputGroupOrientation | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
InputGroupTextAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<unknown>; | — | — |
InputGroupTextProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLSpanElement>; | — | — |
MetaStripProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
density | density?: MetaStripDensity | undefined; | — | — |
items | items: readonly MetaStripItem[]; | — | — |
ref | ref?: Ref<HTMLDListElement>; | — | — |
NavbarProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
breakpoint | breakpoint?: false | NavbarCollapseBreakpoint | undefined; | — | — |
collapseAt | collapseAt?: false | NavbarCollapseBreakpoint | undefined; | — | — |
collapseIcon | collapseIcon?: unknown; | — | — |
collapseLabel | collapseLabel?: string | undefined; | — | — |
NavBrandProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: ResponsiveValue<BlockAlign> | undefined; | — | — |
asChild | asChild?: boolean | undefined; | — | — |
background | background?: ResponsiveValue<BlockBackground> | undefined; | — | — |
border | border?: ResponsiveValue<boolean> | undefined; | — | — |
borderBottom | borderBottom?: ResponsiveValue<boolean> | undefined; | — | — |
borderRight | borderRight?: ResponsiveValue<boolean> | undefined; | — | — |
borderTop | borderTop?: ResponsiveValue<boolean> | undefined; | — | — |
center | center?: ResponsiveValue<boolean> | undefined; | — | — |
children | children?: unknown; | — | — |
direction | direction?: ResponsiveValue<BlockDirection> | undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: ResponsiveValue<number | boolean> | undefined; | — | — |
height | height?: ResponsiveValue<BlockSize> | undefined; | — | — |
hide | hide?: ResponsiveValue<boolean> | undefined; | — | — |
justify | justify?: ResponsiveValue<BlockJustify> | undefined; | — | — |
margin | margin?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginX | marginX?: ResponsiveValue<BlockMargin> | undefined; | — | — |
marginY | marginY?: ResponsiveValue<BlockMargin> | undefined; | — | — |
maxHeight | maxHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
maxWidth | maxWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
minHeight | minHeight?: ResponsiveValue<BlockSize> | undefined; | — | — |
minWidth | minWidth?: ResponsiveValue<BlockSize> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingY | paddingY?: ResponsiveValue<BlockSpace> | undefined; | — | — |
radius | radius?: ResponsiveValue<BlockRadius> | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
rowFrom | rowFrom?: BlockRowFrom | undefined; | — | — |
shadow | shadow?: ResponsiveValue<BlockShadow> | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
sticky | sticky?: boolean | undefined; | — | — |
top | top?: ResponsiveValue<BlockSpace> | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: ResponsiveValue<BlockZIndex> | undefined; | — | — |
NavDropdownProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
label | label: unknown; | — | — |
NavGroupProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
label | label?: unknown; | — | — |
title | title?: unknown; | — | — |
NavItemAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<unknown>; | — | — |
NavItemProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLAnchorElement>; | — | — |
NavLinkProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
match | match?: NavLinkMatch | undefined; | — | — |
PageHeaderProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | actions?: unknown; | — | — |
description | description?: unknown; | — | — |
direction | direction?: undefined; | — | — |
rowFrom | rowFrom?: undefined; | — | — |
title | title: unknown; | — | — |
PillProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
match | match?: NavLinkMatch | undefined; | — | — |
PillsAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<unknown>; | — | — |
PillsProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
SeparatorAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
decorative | decorative?: boolean | undefined; | — | — |
orientation | orientation?: "vertical" | "horizontal" | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
SeparatorNativeProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
decorative | decorative?: boolean | undefined; | — | — |
orientation | orientation?: "vertical" | "horizontal" | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
SeparatorOwnProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
decorative | decorative?: boolean | undefined; | — | — |
orientation | orientation?: "vertical" | "horizontal" | undefined; | — | — |
SeparatorProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: boolean | undefined; | — | — |
children | children?: unknown; | — | — |
decorative | decorative?: boolean | undefined; | — | — |
orientation | orientation?: "vertical" | "horizontal" | undefined; | — | — |
ref | ref?: ((value: unknown) => void) | { current: unknown; } | ((value: HTMLDivElement | null) => void) | { current: HTMLDivElement | null; } | null | undefined; | — | — |
SidebarButtonProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
asChild | asChild?: boolean | undefined; | — | — |
size | size?: "default" | "sm" | "lg" | undefined; | — | — |
tooltip | tooltip?: string | undefined; | — | — |
tooltipSide | tooltipSide?: SidebarTooltipSide | undefined; | — | — |
variant | variant?: "default" | "outline" | undefined; | — | — |
SidebarPartProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
as | as?: keyof JSX.IntrinsicElements | undefined; | — | — |
asChild | asChild?: boolean | undefined; | — | — |
SidebarProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
collapsible | collapsible?: SidebarCollapsible | undefined; | — | — |
shrink | shrink?: ResponsiveValue<number | boolean> | undefined; | — | — |
side | side?: SidebarSide | undefined; | — | — |
variant | variant?: SidebarVariant | undefined; | — | — |
width | width?: ResponsiveValue<BlockSize> | undefined; | — | — |
SidebarRailProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
asChild | asChild?: boolean | undefined; | — | — |
size | size?: "default" | "sm" | "lg" | undefined; | — | — |
tooltip | tooltip?: string | undefined; | — | — |
tooltipSide | tooltipSide?: SidebarTooltipSide | undefined; | — | — |
variant | variant?: "default" | "outline" | undefined; | — | — |
SkeletonAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
height | height?: string | number | undefined; | — | — |
ref | ref?: Ref<unknown>; | — | — |
width | width?: string | number | undefined; | — | — |
SkeletonOwnProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
height | height?: string | number | undefined; | — | — |
width | width?: string | number | undefined; | — | — |
SkeletonProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
height | height?: string | number | undefined; | — | — |
ref | ref?: Ref<HTMLDivElement>; | — | — |
width | width?: string | number | undefined; | — | — |
SpinnerOwnProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
label | label?: string | undefined; | — | — |
size | size?: SpinnerSize | undefined; | — | — |
SpinnerProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
label | label?: string | undefined; | — | — |
size | size?: SpinnerSize | undefined; | — | — |
StackProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
align | align?: unknown; | — | — |
asChild | asChild?: unknown; | — | — |
background | background?: unknown; | — | — |
border | border?: unknown; | — | — |
borderBottom | borderBottom?: unknown; | — | — |
borderRight | borderRight?: unknown; | — | — |
borderTop | borderTop?: unknown; | — | — |
center | center?: unknown; | — | — |
children | children?: unknown; | — | — |
direction | direction?: undefined; | — | — |
gap | gap?: ResponsiveValue<BlockSpace> | undefined; | — | — |
grow | grow?: unknown; | — | — |
height | height?: unknown; | — | — |
hide | hide?: unknown; | — | — |
justify | justify?: unknown; | — | — |
margin | margin?: unknown; | — | — |
marginX | marginX?: unknown; | — | — |
marginY | marginY?: unknown; | — | — |
maxHeight | maxHeight?: unknown; | — | — |
maxWidth | maxWidth?: unknown; | — | — |
minHeight | minHeight?: unknown; | — | — |
minWidth | minWidth?: unknown; | — | — |
p | p?: ResponsiveValue<BlockSpace> | undefined; | — | — |
padding | padding?: ResponsiveValue<BlockSpace> | undefined; | — | — |
paddingX | paddingX?: unknown; | — | — |
paddingY | paddingY?: unknown; | — | — |
radius | radius?: unknown; | — | — |
ref | ref?: unknown; | — | — |
rowFrom | rowFrom?: undefined; | — | — |
shadow | shadow?: unknown; | — | — |
shrink | shrink?: unknown; | — | — |
sticky | sticky?: unknown; | — | — |
top | top?: unknown; | — | — |
width | width?: unknown; | — | — |
wrap | wrap?: ResponsiveValue<boolean> | undefined; | — | — |
zIndex | zIndex?: unknown; | — | — |
TabProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
active | active?: boolean | undefined; | — | — |
match | match?: NavLinkMatch | undefined; | — | — |
TabsAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
ref | ref?: Ref<unknown>; | — | — |
TabsProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | asChild?: false | undefined; | — | — |
children | children?: unknown; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
TextProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
as | as?: TextElement | undefined; | — | — |
children | children?: unknown; | — | — |
font | font?: TextFont | undefined; | — | — |
numeric | numeric?: TextNumeric | undefined; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
size | size?: TextSize | undefined; | — | — |
tone | tone?: TextTone | undefined; | — | — |
truncate | truncate?: boolean | undefined; | — | — |
weight | weight?: TextWeight | undefined; | — | — |
wrap | wrap?: TextWrap | undefined; | — | — |
ThemePickerProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
label | label?: string | undefined; | — | — |
themes | themes?: readonly ThemeOption[] | undefined; | — | — |
ThemeScopeProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
defaultTheme | defaultTheme?: ThemeName | undefined; | — | — |
storageKey | storageKey?: string | undefined; | — | — |
themes | themes?: readonly ThemeOption[] | undefined; | — | — |
ThemeToggleProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
children | children?: unknown; | — | — |
darkIcon | darkIcon?: unknown; | — | — |
lightIcon | lightIcon?: unknown; | — | — |
onPress | onPress?: ((event: PressEvent) => void) | undefined; | — | — |
systemIcon | systemIcon?: unknown; | — | — |
themes | themes?: readonly ThemeName[] | undefined; | — | — |
ToolbarProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | actions?: unknown; | — | — |
direction | direction?: undefined; | — | — |
rowFrom | rowFrom?: undefined; | — | — |
title | title: unknown; | — | — |
VirtualListAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
apiRef | apiRef?: Ref<VirtualListApi<Item> | null>; | — | — |
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
followBottom | followBottom?: boolean | { threshold?: number; } | undefined; | — | — |
getKey | getKey: (item: Item, index: number) => string | number; | — | — |
getRowHeight | getRowHeight?: ((item: Item, index: number) => number) | undefined; | — | Optional keyed row sizing. When omitted, VirtualList retains its fixed-height arithmetic path. |
items | items: readonly Item[]; | — | — |
onScroll | onScroll?: ((event: Event) => void) | undefined; | — | — |
overscan | overscan?: VirtualOverscan | undefined; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
rowComponent | rowComponent: VirtualListRowComponent<Item>; | — | — |
rowHeight | rowHeight: number; | — | — |
viewport | viewport?: "lg" | undefined; | — | — |
VirtualListProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
apiRef | apiRef?: Ref<VirtualListApi<Item> | null>; | — | — |
asChild | asChild?: false | undefined; | — | — |
followBottom | followBottom?: boolean | { threshold?: number; } | undefined; | — | — |
getKey | getKey: (item: Item, index: number) => string | number; | — | — |
getRowHeight | getRowHeight?: ((item: Item, index: number) => number) | undefined; | — | Optional keyed row sizing. When omitted, VirtualList retains its fixed-height arithmetic path. |
items | items: readonly Item[]; | — | — |
onScroll | onScroll?: ((event: Event) => void) | undefined; | — | — |
overscan | overscan?: VirtualOverscan | undefined; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
rowComponent | rowComponent: VirtualListRowComponent<Item>; | — | — |
rowHeight | rowHeight: number; | — | — |
viewport | viewport?: "lg" | undefined; | — | — |
VirtualListRowComponentProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
index | index: number; | — | — |
isVisible | isVisible: boolean; | — | — |
item | item: Item; | — | — |
rowKey | rowKey: string; | — | — |
VirtualTableAsChildProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
apiRef | apiRef?: Ref<VirtualTableApi<Row> | null>; | — | — |
asChild | asChild: true; | — | — |
children | children: JSXElement; | — | — |
columns | columns: readonly VirtualTableColumn<Row>[]; | — | — |
defaultSelectedRowKey | defaultSelectedRowKey?: string | null | undefined; | — | — |
getKey | getKey: (row: Row, index: number) => string | number; | — | — |
headerHeight | headerHeight: number; | — | — |
onRowClick | onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined; | — | — |
onScroll | onScroll?: ((event: Event) => void) | undefined; | — | — |
onSelectedRowKeyChange | onSelectedRowKeyChange?: ((next: string | null) => void) | undefined; | — | — |
overscan | overscan?: VirtualOverscan | undefined; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
rowHeight | rowHeight: number; | — | — |
rows | rows: readonly Row[]; | — | — |
selectedRowKey | selectedRowKey?: string | null | undefined; | — | — |
tableWidth | tableWidth?: "compact" | undefined; | — | — |
viewport | viewport?: "lg" | undefined; | — | — |
VirtualTableCellComponentProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
column | column: VirtualTableColumn<Row>; | — | — |
row | row: Row; | — | — |
rowIndex | rowIndex: number; | — | — |
rowKey | rowKey: string; | — | — |
selected | selected: boolean; | — | — |
VirtualTableProps
Import from @askrjs/themes/components.
| Prop | Type | Default | Description |
|---|---|---|---|
apiRef | apiRef?: Ref<VirtualTableApi<Row> | null>; | — | — |
asChild | asChild?: false | undefined; | — | — |
columns | columns: readonly VirtualTableColumn<Row>[]; | — | — |
defaultSelectedRowKey | defaultSelectedRowKey?: string | null | undefined; | — | — |
getKey | getKey: (row: Row, index: number) => string | number; | — | — |
headerHeight | headerHeight: number; | — | — |
onRowClick | onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined; | — | — |
onScroll | onScroll?: ((event: Event) => void) | undefined; | — | — |
onSelectedRowKeyChange | onSelectedRowKeyChange?: ((next: string | null) => void) | undefined; | — | — |
overscan | overscan?: VirtualOverscan | undefined; | — | — |
ref | ref?: Ref<HTMLElement>; | — | — |
rowHeight | rowHeight: number; | — | — |
rows | rows: readonly Row[]; | — | — |
selectedRowKey | selectedRowKey?: string | null | undefined; | — | — |
tableWidth | tableWidth?: "compact" | undefined; | — | — |
viewport | viewport?: "lg" | undefined; | — | — |
Purpose
Toast and ToastHost provide the notification lifecycle. Toaster provides a styling-only host for application-owned presentation and does not implement an imperative toast API, timers, stacking or dismissal.
Install and import
Import the headless Toast family from @askrjs/ui/toast and the themed version from @askrjs/themes/toast. Toaster is available from the supported @askrjs/themes/components aggregate. Migrate the retired Sonner alias to Toaster; it remains a styling-only host.
Live examples
Trigger Toast and observe its registry-backed timing and dismissal. Inspect Toaster separately as a styled container; it has no live notification queue to exercise.
Anatomy
ToastHost owns the notification registry and default duration; ToastViewport presents the stack. Compose each Toast from title, description and optional action or close controls. Toaster is a separate styling-only host with no registry or notification lifecycle.
State model
An individual Toast takes open/defaultOpen/onOpenChange like the other disclosure primitives, plus its own duration (falling back to ToastHost's default when omitted) and a variant of 'default' | 'success' | 'warning' | 'danger' | 'info'. Setting duration on ToastHost changes that fallback for every toast underneath it that doesn't specify one itself.
Keyboard and accessibility
The Toast family exposes a polite status region and a Notifications viewport label. Test announcement content, focusable actions, dismissal and timer pausing in your composition. Toaster does not add those interaction or announcement behaviors by itself.
Styling and tokens
The Toast family exposes data-slot and data-state styling hooks. Toaster preserves its existing data-slot="sonner" hook; that DOM styling name does not restore the retired Sonner export or add notification behavior.
API
ToastHostProps adds duration on top of standard div props; ToastProps adds variant, open/defaultOpen/onOpenChange, and duration. ToastAction and ToastClose use the same button-like prop shape as other interactive primitives in the library, including asChild.
Edge cases
Render each Toast beneath ToastHost so it can register. Toaster does not supply a queue, timer, stacking or dismissal behavior; applications using it must provide any such behavior explicitly.
Related pages
See Progress for status feedback with a determinate value instead of a transient message, and Alert, Badge, Empty, Skeleton, and Spinner for feedback that should stay on screen rather than time out.