Buttons

Buttons initiate actions and guide user interactions. Designed for clarity and responsiveness, they ensure intuitive use and visual consistency across different states and interfaces.

Design

Copy js and css

				
					<link href="#" rel="stylesheet">

				
					<script src="#"></script>

Usage & Examples

This guide explains how to use the Twinkle Button system with different icon/text combinations, responsive toggles, and utility classes.

1. Base Structure

All Twinkle buttons share the .tw-btn class as the base. They can be applied to button, a, or any clickable element.

				
					<button class="tw-btn">Default Button</button>
<a href="#" class="tw-btn">Link Button</a>

2. Content Types

a) Text Only

				
					<button class="tw-btn">
  <span class="text">Save Post</span>
</button>

Notes:

Use .text span to wrap the label for better control in responsive modes.
No icon is present.

b) Icon Only

				
					<button class="tw-btn icon-only">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
</button>

Notes:

.icon-only hides text completely.
Used for toolbars, small action buttons, or icon-only actions.

c) Icon + Text

				
					<button class="tw-btn">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
  <span class="text">Save Post</span>
</button>

Notes:

Both icon and text are always visible unless a toggle class is applied.
Best for clarity on desktop.

3. Responsive Display Control

a) has-icon-toggle

Switches between icon and text depending on viewport:

Mobile: Icon only
Desktop: Text only

				
					<button class="tw-btn has-icon-toggle">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
  <span class="text">Save Post</span>
</button>

b) mobile-both

Shows icon + text on mobile (overrides default has-icon-toggle behavior for mobile).

				
					<button class="tw-btn has-icon-toggle mobile-both">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
  <span class="text">Save Post</span>
</button>

c) desktop-both

Shows icon + text on desktop (overrides default has-icon-toggle behavior for desktop).

				
					<button class="tw-btn has-icon-toggle desktop-both">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
  <span class="text">Save Post</span>
</button>

d) Always Icon + Text

If you want both icon and text visible on all devices, don’t use has-icon-toggle — just .tw-btn with icon + .text.

				
					<button class="tw-btn">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
  <span class="text">Save Post</span>
</button>

4. Examples Overview Table

Class Setup	Mobile View	Desktop View	Use Case
`.tw-btn` (icon + text)	Icon + Text	Icon + Text	Always show both
`.tw-btn` (text only)	Text	Text	No icon needed
`.tw-btn.icon-only`	Icon	Icon	Compact action
`.tw-btn.has-icon-toggle`	Icon	Text	Space-saving on mobile
`.tw-btn.has-icon-toggle.mobile-both`	Icon + Text	Text	Clarify action on mobile
`.tw-btn.has-icon-toggle.desktop-both`	Icon	Icon + Text	Keep full label on desktop

5. Accessibility

Always include aria-hidden=”true” on decorative icons.
Use descriptive aria-label if the button has no visible text.

				
					<button class="tw-btn icon-only" aria-label="Save Post">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
</button>

Design

Abel Ferro

Twinkle System Designer

CDN

Raul Suarez

DevOps Engineer