Design pattern

Dokumentasi komponen dan token na-design-system.

@supriyadies-work/na-design-system@1.2.5

Molecules

Alert

Molecules

Props

Name	Type	Required
variant	"success" \| "error" \| "warning" \| "info"	No
title	string	No
message	string	Yes
onClose	() => void	No
className	string	No

Back Link

Molecules

Props

Name	Type	Required
href	string	Yes
label	string	No
className	string	No
iconClassName	string	No
testId	string	No

Button Group

Molecules

Props

Name	Type	Required
children	React.ReactNode	Yes
className	string	No
orientation	"horizontal" \| "vertical"	No
spacing	"sm" \| "md" \| "lg"	No
testId	string	No

Button Icon

Molecules

Props

Name	Type	Required
icon	IconName	Yes
label	string	Yes
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	No
size	"sm" \| "md" \| "lg"	No
className	string	No
onClick	() => void	No
href	string	No
iconFill	boolean	No
iconSize	"sm" \| "md" \| "lg" \| "xl"	No
testId	string	No

Card Header

Molecules

Props

Name	Type	Required
title	string	Yes
subtitle	string	No
className	string	No
variant	"default" \| "primary" \| "secondary"	No

Checkbox Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
checked	boolean	Yes
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Yes
required	boolean	No
error	string	No
className	string	No

Cover Image

Molecules

Props

Name	Type	Required
src	string	Yes
alt	string	Yes
className	string	No
containerClassName	string	No
priority	boolean	No
sizes	string	No
testId	string	No

Dialog

Molecules

Props

Name	Type	Required
isOpen	boolean	Yes
onClose	() => void	Yes
onConfirm	() => void	No
title	string	Yes
message	string	Yes
confirmText	string	No
cancelText	string	No
variant	"default" \| "danger"	No

Empty State

Molecules

Props

Name	Type	Required
title	string	Yes
description	string	No
action	{ label: string	No
onClick	() => void	Yes
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	No
className	string	No
icon	React.ReactNode	No
image	string	No
showDefaultImage	boolean	No
testId	string	No

Filter Group

Molecules

Props

Name	Type	Required
label	string	Yes
options	string[]	Yes
selectedValue	string	Yes
onSelect	(value: string) => void	Yes
formatOption	(option: string) => string	No
allLabel	string	No
className	string	No
testId	string	No

Form Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
type	"text" \| "email" \| "password" \| "textarea"	No
value	string	Yes
onChange	( e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>, ) => void	Yes
placeholder	string	No
required	boolean	No
error	string	No
validation	ValidationRule	No
className	string	No
testId	string	No

Form Group

Molecules

Props

Name	Type	Required
children	React.ReactNode	Yes
className	string	No
spacing	"sm" \| "md" \| "lg"	No

Glass Radio Group

Molecules

Props

Name	Type	Required
name	string	Yes
options	TabOption[]	Yes
selectedValue	number	Yes
onChange	(value: number) => void	Yes
className	string	No
testId	string	No

Input Group

Molecules

Props

Name	Type	Required
children	React.ReactNode	Yes
prefix	React.ReactNode	No
suffix	React.ReactNode	No
className	string	No

Loading Screen

Molecules

Radio Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
value	string	Yes
checked	boolean	Yes
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Yes
required	boolean	No
error	string	No
className	string	No

Rich Text Editor

Molecules

Props

Name	Type	Required
value	string	Yes
onChange	(content: string) => void	Yes
placeholder	string	No
blogSlug	string	No
onPendingImagesChange	(images: PendingImage[]) => void	No

Search And Filter

Molecules

Props

Name	Type	Required
onSearchChange	(query: string) => void	Yes
searchPlaceholder	string	No
onCategoryChange	(categoryId: string) => void	No
categories	FilterOption[]	No
categoryLabel	string	No
onLayoutChange	(layout: "grid" \| "list") => void	No
showLayoutToggle	boolean	No
testId	string	No

Search Input

Molecules

Props

Name	Type	Required
value	string	Yes
onChange	(value: string) => void	Yes
placeholder	string	No
className	string	No
testId	string	No

Select Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
value	string	Yes
onChange	(e: React.ChangeEvent<HTMLSelectElement>) => void	Yes
options	Array<{ value: string	Yes
label	string }>	Yes
placeholder	string	No
required	boolean	No
error	string	No
className	string	No

Switch Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
checked	boolean	Yes
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Yes
required	boolean	No
error	string	No
className	string	No

Tab Content

Molecules

Props

Name	Type	Required
tabsRef	React.RefObject<HTMLDivElement>	No
tabContentRef	React.RefObject<HTMLDivElement>	No
options	TabOption[]	Yes
currentTabIndex	number	Yes
pendingTabIndex	number \| null	No
isTransitioning	boolean	No
onChange	(value: number) => void	Yes
name	string	No
children	(tabIndex: number) => React.ReactNode	Yes
className	string	No
contentClassName	string	No
onViewAllClick	() => void	No
testId	string	No

Tabs

Molecules

Props

Name	Type	Required
tabs	Tab[]	Yes
defaultTab	string	No
className	string	No

Toast

Molecules

Props

Name	Type	Required
message	string	Yes
variant	"success" \| "info"	No
duration	number	No
onClose	() => void	No
className	string	No

← Kembali ke beranda

Design pattern

Dokumentasi komponen dan token na-design-system.

@supriyadies-work/na-design-system@1.2.5

Molecules

Alert

Molecules

Props

Name	Type	Required
variant	"success" \| "error" \| "warning" \| "info"	No
title	string	No
message	string	Yes
onClose	() => void	No
className	string	No

Back Link

Molecules

Props

Name	Type	Required
href	string	Yes
label	string	No
className	string	No
iconClassName	string	No
testId	string	No

Button Group

Molecules

Props

Name	Type	Required
children	React.ReactNode	Yes
className	string	No
orientation	"horizontal" \| "vertical"	No
spacing	"sm" \| "md" \| "lg"	No
testId	string	No

Button Icon

Molecules

Props

Name	Type	Required
icon	IconName	Yes
label	string	Yes
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	No
size	"sm" \| "md" \| "lg"	No
className	string	No
onClick	() => void	No
href	string	No
iconFill	boolean	No
iconSize	"sm" \| "md" \| "lg" \| "xl"	No
testId	string	No

Card Header

Molecules

Props

Name	Type	Required
title	string	Yes
subtitle	string	No
className	string	No
variant	"default" \| "primary" \| "secondary"	No

Checkbox Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
checked	boolean	Yes
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Yes
required	boolean	No
error	string	No
className	string	No

Cover Image

Molecules

Props

Name	Type	Required
src	string	Yes
alt	string	Yes
className	string	No
containerClassName	string	No
priority	boolean	No
sizes	string	No
testId	string	No

Dialog

Molecules

Props

Name	Type	Required
isOpen	boolean	Yes
onClose	() => void	Yes
onConfirm	() => void	No
title	string	Yes
message	string	Yes
confirmText	string	No
cancelText	string	No
variant	"default" \| "danger"	No

Empty State

Molecules

Props

Name	Type	Required
title	string	Yes
description	string	No
action	{ label: string	No
onClick	() => void	Yes
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	No
className	string	No
icon	React.ReactNode	No
image	string	No
showDefaultImage	boolean	No
testId	string	No

Filter Group

Molecules

Props

Name	Type	Required
label	string	Yes
options	string[]	Yes
selectedValue	string	Yes
onSelect	(value: string) => void	Yes
formatOption	(option: string) => string	No
allLabel	string	No
className	string	No
testId	string	No

Form Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
type	"text" \| "email" \| "password" \| "textarea"	No
value	string	Yes
onChange	( e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>, ) => void	Yes
placeholder	string	No
required	boolean	No
error	string	No
validation	ValidationRule	No
className	string	No
testId	string	No

Form Group

Molecules

Props

Name	Type	Required
children	React.ReactNode	Yes
className	string	No
spacing	"sm" \| "md" \| "lg"	No

Glass Radio Group

Molecules

Props

Name	Type	Required
name	string	Yes
options	TabOption[]	Yes
selectedValue	number	Yes
onChange	(value: number) => void	Yes
className	string	No
testId	string	No

Input Group

Molecules

Props

Name	Type	Required
children	React.ReactNode	Yes
prefix	React.ReactNode	No
suffix	React.ReactNode	No
className	string	No

Loading Screen

Molecules

Radio Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
value	string	Yes
checked	boolean	Yes
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Yes
required	boolean	No
error	string	No
className	string	No

Rich Text Editor

Molecules

Props

Name	Type	Required
value	string	Yes
onChange	(content: string) => void	Yes
placeholder	string	No
blogSlug	string	No
onPendingImagesChange	(images: PendingImage[]) => void	No

Search And Filter

Molecules

Props

Name	Type	Required
onSearchChange	(query: string) => void	Yes
searchPlaceholder	string	No
onCategoryChange	(categoryId: string) => void	No
categories	FilterOption[]	No
categoryLabel	string	No
onLayoutChange	(layout: "grid" \| "list") => void	No
showLayoutToggle	boolean	No
testId	string	No

Search Input

Molecules

Props

Name	Type	Required
value	string	Yes
onChange	(value: string) => void	Yes
placeholder	string	No
className	string	No
testId	string	No

Select Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
value	string	Yes
onChange	(e: React.ChangeEvent<HTMLSelectElement>) => void	Yes
options	Array<{ value: string	Yes
label	string }>	Yes
placeholder	string	No
required	boolean	No
error	string	No
className	string	No

Switch Field

Molecules

Props

Name	Type	Required
label	string	Yes
name	string	Yes
checked	boolean	Yes
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Yes
required	boolean	No
error	string	No
className	string	No

Tab Content

Molecules

Props

Name	Type	Required
tabsRef	React.RefObject<HTMLDivElement>	No
tabContentRef	React.RefObject<HTMLDivElement>	No
options	TabOption[]	Yes
currentTabIndex	number	Yes
pendingTabIndex	number \| null	No
isTransitioning	boolean	No
onChange	(value: number) => void	Yes
name	string	No
children	(tabIndex: number) => React.ReactNode	Yes
className	string	No
contentClassName	string	No
onViewAllClick	() => void	No
testId	string	No

Tabs

Molecules

Props

Name	Type	Required
tabs	Tab[]	Yes
defaultTab	string	No
className	string	No

Toast

Molecules

Props

Name	Type	Required
message	string	Yes
variant	"success" \| "info"	No
duration	number	No
onClose	() => void	No
className	string	No

Molecules

Alert

Props

Back Link

Props

Button Group

Props

Button Icon

Props

Card Header

Props

Checkbox Field

Props

Cover Image

Props

Dialog

Props

Empty State

Props

Filter Group

Props

Form Field

Props

Form Group

Props

Glass Radio Group

Props

Input Group

Props

Loading Screen

Modal

Props

Radio Field

Props

Rich Text Editor

Props

Search And Filter

Props

Search Input

Props

Select Field

Props

Switch Field

Props

Tab Content

Props

Tabs

Props

Toast

Props

Molecules

Alert

Props

Back Link

Props

Button Group

Props

Button Icon

Props

Card Header

Props

Checkbox Field

Props

Cover Image

Props

Dialog

Props

Empty State

Props

Filter Group

Props

Form Field

Props

Form Group

Props

Glass Radio Group

Props

Input Group

Props

Loading Screen