Design pattern

Dokumentasi komponen dan token na-design-system.

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

Atoms

Animated Background

Atoms

Props

Name	Type	Required
className	string	No
testId	string	No

Avatar

Atoms

Props

Name	Type	Required
src	string	No
alt	string	No
name	string	No
size	"sm" \| "md" \| "lg" \| "xl"	No
className	string	No
priority	boolean	No

Badge

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
variant	"default" \| "primary" \| "success" \| "warning" \| "danger" \| "info"	No
size	"sm" \| "md" \| "lg"	No
className	string	No
testId	string	No

Button

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
variant	\| "primary" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "filter" \| "text"	No
size	"sm" \| "md" \| "lg"	No
className	string	No
onClick	() => void	No
onMouseEnter	() => void	No
onFocus	() => void	No
href	string	No
type	"button" \| "submit" \| "reset"	No
disabled	boolean	No
isActive	boolean	No
hideFocusRing	boolean	No
testId	string	No

Card

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
className	string	No
padding	"none" \| "sm" \| "md" \| "lg"	No
hover	boolean	No
testId	string	No

Checkbox

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
required	boolean	No
testId	string	No

Divider

Atoms

Props

Name	Type	Required
orientation	"horizontal" \| "vertical"	No
className	string	No
testId	string	No

Usage

import { Divider } from "@supriyadies-work/na-design-system/components/atoms";

// Horizontal (default)
<Divider />

// Vertical
<div className="flex items-center gap-4 h-8">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

Section above

Section below

Vertical

Left

Right

Icon

Atoms

Props

Name	Type	Required
name	IconName	No
children	React.ReactNode	No
size	"sm" \| "md" \| "lg" \| "xl"	No
className	string	No
stroke	boolean	No
fill	boolean	No
testId	string	No

Image

Atoms

Props

Name	Type	Required
src	string	Yes
alt	string	Yes
width	number	No
height	number	No
fill	boolean	No
className	string	No
priority	boolean	No
sizes	string	No
unoptimized	boolean	No
quality	number	No
loading	"lazy" \| "eager"	No
onLoad	() => void	No
onError	() => void	No
onClick	(e: React.MouseEvent<HTMLImageElement>) => void	No
suppressHydrationWarning	boolean	No
testId	string	No

Input

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
helperText	string	No
required	boolean	No
testId	string	No

Label

Atoms

Props

Name	Type	Required
required	boolean	No
error	boolean	No

Link

Atoms

Props

Name	Type	Required
href	string	Yes
children	React.ReactNode	Yes
variant	"default" \| "primary" \| "secondary"	No
className	string	No
external	boolean	No
onClick	() => void	No
onMouseEnter	() => void	No
onFocus	() => void	No
testId	string	No

Morphing Transition

Atoms

Props

Name	Type	Required
wrapRef	React.RefObject<HTMLDivElement>	No
svgRef	React.RefObject<SVGSVGElement>	No
pathRef	React.RefObject<SVGPathElement>	No
gradientId	string	No
gradientColors	{ start: string	No
end	string	Yes
initialPath	string	No
className	string	No
testId	string	No

Radio

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
required	boolean	No
testId	string	No

Select

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
helperText	string	No
required	boolean	No
options	Array<{ value: string	Yes
label	string }>	Yes
testId	string	No

Skeleton

Atoms

Props

Name	Type	Required
width	string	No
height	string	No
className	string	No
variant	"text" \| "circular" \| "rectangular"	No
testId	string	No

Spinner

Atoms

Props

Name	Type	Required
size	"sm" \| "md" \| "lg"	No
className	string	No
label	string	No
testId	string	No

Switch

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
required	boolean	No
testId	string	No

Text

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
variant	\| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body" \| "small" \| "caption" \| "label" \| "hero"	No
className	string	No
as	React.ElementType	No
style	React.CSSProperties	No
testId	string	No

Textarea

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
helperText	string	No
required	boolean	No
testId	string	No

← Kembali ke beranda

Design pattern

Dokumentasi komponen dan token na-design-system.

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

Atoms

Animated Background

Atoms

Props

Name	Type	Required
className	string	No
testId	string	No

Avatar

Atoms

Props

Name	Type	Required
src	string	No
alt	string	No
name	string	No
size	"sm" \| "md" \| "lg" \| "xl"	No
className	string	No
priority	boolean	No

Badge

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
variant	"default" \| "primary" \| "success" \| "warning" \| "danger" \| "info"	No
size	"sm" \| "md" \| "lg"	No
className	string	No
testId	string	No

Button

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
variant	\| "primary" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "filter" \| "text"	No
size	"sm" \| "md" \| "lg"	No
className	string	No
onClick	() => void	No
onMouseEnter	() => void	No
onFocus	() => void	No
href	string	No
type	"button" \| "submit" \| "reset"	No
disabled	boolean	No
isActive	boolean	No
hideFocusRing	boolean	No
testId	string	No

Card

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
className	string	No
padding	"none" \| "sm" \| "md" \| "lg"	No
hover	boolean	No
testId	string	No

Checkbox

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
required	boolean	No
testId	string	No

Divider

Atoms

Props

Name	Type	Required
orientation	"horizontal" \| "vertical"	No
className	string	No
testId	string	No

Usage

import { Divider } from "@supriyadies-work/na-design-system/components/atoms";

// Horizontal (default)
<Divider />

// Vertical
<div className="flex items-center gap-4 h-8">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

Section above

Section below

Vertical

Left

Right

Icon

Atoms

Props

Name	Type	Required
name	IconName	No
children	React.ReactNode	No
size	"sm" \| "md" \| "lg" \| "xl"	No
className	string	No
stroke	boolean	No
fill	boolean	No
testId	string	No

Image

Atoms

Props

Name	Type	Required
src	string	Yes
alt	string	Yes
width	number	No
height	number	No
fill	boolean	No
className	string	No
priority	boolean	No
sizes	string	No
unoptimized	boolean	No
quality	number	No
loading	"lazy" \| "eager"	No
onLoad	() => void	No
onError	() => void	No
onClick	(e: React.MouseEvent<HTMLImageElement>) => void	No
suppressHydrationWarning	boolean	No
testId	string	No

Input

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
helperText	string	No
required	boolean	No
testId	string	No

Label

Atoms

Props

Name	Type	Required
required	boolean	No
error	boolean	No

Link

Atoms

Props

Name	Type	Required
href	string	Yes
children	React.ReactNode	Yes
variant	"default" \| "primary" \| "secondary"	No
className	string	No
external	boolean	No
onClick	() => void	No
onMouseEnter	() => void	No
onFocus	() => void	No
testId	string	No

Morphing Transition

Atoms

Props

Name	Type	Required
wrapRef	React.RefObject<HTMLDivElement>	No
svgRef	React.RefObject<SVGSVGElement>	No
pathRef	React.RefObject<SVGPathElement>	No
gradientId	string	No
gradientColors	{ start: string	No
end	string	Yes
initialPath	string	No
className	string	No
testId	string	No

Radio

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
required	boolean	No
testId	string	No

Select

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
helperText	string	No
required	boolean	No
options	Array<{ value: string	Yes
label	string }>	Yes
testId	string	No

Skeleton

Atoms

Props

Name	Type	Required
width	string	No
height	string	No
className	string	No
variant	"text" \| "circular" \| "rectangular"	No
testId	string	No

Spinner

Atoms

Props

Name	Type	Required
size	"sm" \| "md" \| "lg"	No
className	string	No
label	string	No
testId	string	No

Switch

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
required	boolean	No
testId	string	No

Text

Atoms

Props

Name	Type	Required
children	React.ReactNode	Yes
variant	\| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body" \| "small" \| "caption" \| "label" \| "hero"	No
className	string	No
as	React.ElementType	No
style	React.CSSProperties	No
testId	string	No

Textarea

Atoms

Props

Name	Type	Required
label	string	No
error	string	No
helperText	string	No
required	boolean	No
testId	string	No