Back to site

Design System

Component reference for brunoesparza.dev. Live demos with actual components.

DsIconButton

An inline icon + label component. Pass href for a link or onClick for a button — TypeScript enforces you can only use one. Supports hover/focus icon animation, trailing comma, disabled state, custom className, and an optional ariaLabel override.

DsIconButton (href)

DsIconButton (onClick)

With animateIcon (hover or focus)

Github

With trailingComma (list style)

With ariaLabel override

GH

With className (text-primary)

Github

Disabled

Github

Props

NameTypeDefault
iconIconType
labelstring
hrefstring— (exclusive with onClick)
onClick() => void— (exclusive with href)
type'button' | 'submit' | 'reset''button' (only with onClick)
trailingCommabooleanfalse
animateIconbooleanfalse
disabledbooleanfalse
ariaLabelstringlabel value
classNamestring

DsInfiniteLoopText

A single marquee item displaying a large uppercase label paired with an icon. Designed to be placed inside an InfiniteLoop container for continuous horizontal scrolling.

Inside InfiniteLoop

Creative Developer
Photographer
Designer
Creative Developer
Photographer
Designer
Creative Developer
Photographer
Designer

Props

NameTypeDefault
namestring
iconIconType