Button
The Button component allows users to take actions and make choices with a single tap. Frutjam provides extensive customization, including solid, outline, and ghost variants. You can add icons, change shapes to square or circle, and use various sizes. It includes loading and disabled states.
Basic Usage
html
<button class="btn">Button</button>Button Sizes
html
<button class="btn btn-xs">Xsmall</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Xlarge</button>
<button class="btn btn-2xl">2XLarge</button>Button Colors
html
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-neutral">Neutral</button>Button Styles
Soft Buttons
html
<button class="btn btn-soft">Default</button>
<button class="btn btn-primary btn-soft">Primary</button>
<button class="btn btn-secondary btn-soft">Secondary</button>
<button class="btn btn-accent btn-soft">Accent</button>
<button class="btn btn-info btn-soft">Info</button>
<button class="btn btn-success btn-soft">Success</button>
<button class="btn btn-warning btn-soft">Warning</button>
<button class="btn btn-error btn-soft">Error</button>
<button class="btn btn-neutral btn-soft">Neutral</button>Dashed Buttons
html
<button class="btn btn-dashed">Default</button>
<button class="btn btn-dashed btn-primary">Primary</button>
<button class="btn btn-dashed btn-secondary">Secondary</button>
<button class="btn btn-dashed btn-accent">Accent</button>
<button class="btn btn-dashed btn-info">Info</button>
<button class="btn btn-dashed btn-success">Success</button>
<button class="btn btn-dashed btn-warning">Warning</button>
<button class="btn btn-dashed btn-error">Error</button>
<button class="btn btn-dashed btn-neutral">Neutral</button>Outline Buttons
html
<button class="btn btn-outline">Default</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Secondary</button>
<button class="btn btn-outline btn-accent">Accent</button>
<button class="btn btn-outline btn-info">Info</button>
<button class="btn btn-outline btn-success">Success</button>
<button class="btn btn-outline btn-warning">Warning</button>
<button class="btn btn-outline btn-error">Error</button>
<button class="btn btn-outline btn-neutral">Neutral</button>Ghost Buttons
html
<button class="btn-ghost btn">Default</button>
<button class="btn btn-ghost btn-primary">Primary</button>
<button class="btn btn-ghost btn-secondary">Secondary</button>
<button class="btn btn-ghost btn-accent">Accent</button>
<button class="btn btn-ghost btn-info">Info</button>
<button class="btn btn-ghost btn-success">Success</button>
<button class="btn btn-ghost btn-warning">Warning</button>
<button class="btn btn-ghost btn-error">Error</button>
<button class="btn btn-ghost btn-neutral">Neutral</button>Link Buttons
html
<button class="btn btn-link">Default</button>
<button class="btn btn-primary btn-link">Primary</button>
<button class="btn btn-secondary btn-link">Secondary</button>
<button class="btn btn-accent btn-link">Accent</button>
<button class="btn btn-info btn-link">Info</button>
<button class="btn btn-success btn-link">Success</button>
<button class="btn btn-warning btn-link">Warning</button>
<button class="btn btn-error btn-link">Error</button>
<button class="btn btn-neutral btn-link">Neutral</button>Button Shapes
Circle Button
html
<button class="btn btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
</button>Rounded Button
html
<button class="btn btn-error btn-rounded" aria-label="Remove from favorites">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
</svg>
</button>Square Button
html
<button class="btn btn-primary btn-square" aria-label="Add to favorites">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
</svg>
</button>Pill Button
html
<button class="btn btn-primary btn-pill">
Pill button
</button>Button States
Active Buttons
html
<button class="btn btn-active">Default</button>
<button class="btn btn-primary btn-active">Primary</button>
<button class="btn btn-secondary btn-active">Secondary</button>
<button class="btn btn-accent btn-active">Accent</button>
<button class="btn btn-info btn-active">Info</button>
<button class="btn btn-success btn-active">Success</button>
<button class="btn btn-warning btn-active">Warning</button>
<button class="btn btn-error btn-active">Error</button>
<button class="btn btn-neutral btn-active">Neutral</button>Disabled Button
html
<button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button>
<button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true">
Disabled using class name
</button>Button Widths
Wide Button
html
<button class="btn btn-primary btn-wide">Wide</button>Block Button
html
<button class="btn btn-primary btn-block">Block</button>Button Tag Flexibility
html
<input type="button" value="Input" class="btn btn-primary">
<input type="submit" value="Submit" class="btn btn-primary">
<input type="radio" aria-label="Radio" class="btn btn-primary">
<input type="checkbox" aria-label="Checkbox" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
<button type="submit" class="btn btn-primary">Button</button>
<a role="button" class="btn btn-primary">Link</a>