Primary button

Interactive documentation for the primary button component. Change props in the playground, inspect states, and copy the generated example.

clicks: 0

Preview

Code

<PrimaryButton
  leading-icon="lucide:bike"
  leading-avatar="/Photo.png"
  leading-avatar-initials="AB"
  trailing-icon="lucide:car"
  trailing-avatar="/AvatarTrailing.png"
  trailing-avatar-initials="CD"
>
  Button
</PrimaryButton>

States

Dedicated examples for rounded, square, and disabled states without duplicating markup across the page.

Rounded full

Square

Disabled

Props

This table matches the current PrimaryButtonProps interface.

Prop	Type	Default	Description
size	's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'	'l'	Button size. Uses values from primaryButtonSizes and controls height, padding, radius, text size, gap, icon size, and avatar size.
color	'midnight' \| 'basil' \| 'red' \| 'amber'	'midnight'	Base color scheme. Used together with type to resolve classes from backgroundHash[color][type].
type	'dark' \| 'light' \| 'cocaine'	'dark'	Visual variant inside the selected color: dark fill, light fill, or cocaine/white variant with border.
roundedFull	boolean	false	If true, replaces the radius from the size config with rounded-full. Useful for pill-shaped buttons.
square	boolean	false	If true, the button becomes square using aspect-square and pxSquare instead of regular horizontal padding.
leadingIcon	string	undefined	Leading icon name. Rendered through CustomIcon when leadingIconShape is "square" and through Icon when set to "rect".
leadingAvatar	string	undefined	Image source for the leading avatar. If the prop exists but the value is empty, Avatar receives type="icon".
leadingAvatarInitials	string	''	Initials for the leading avatar. Used by the Avatar component as a fallback.
leadingAvatarChip	boolean	false	Enables chip mode for the leading Avatar component.
trailingIcon	string	undefined	Имя иконки справа. Рендерится через CustomIcon и получает размер из текущего size.
trailingIconClass	string	''	Additional CSS/Tailwind classes for the trailing icon. For example: rotate-45 or text-red-600.
trailingAvatar	string	undefined	Image source for the trailing avatar. When provided, Avatar is rendered with type="photo".
trailingAvatarInitials	string	''	Initials for the trailing avatar. Used as a fallback inside Avatar.
disabled	boolean	false	Disables the button using the native disabled attribute. Also applies disabled cursor and opacity styles.
leadingIconShape	'square' \| 'rect'	'square'	Leading icon shape. For rect + size="s", width=16 and height=12 are used. Otherwise the default icon size is applied.
display	'block' \| 'inline'	'block'	Controls the display class: block uses flex, inline uses inline-flex.
nativeType	'button' \| 'submit' \| 'reset'	'button'	Native button type attribute. Use submit/reset inside forms.
justify	'center' \| 'start'	'center'	Content alignment inside the button. center adds justify-center, start adds justify-start.

Slots

The component supports overriding internal parts using named slots.