Twinkle
Design System
TDS
Request

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>
Default Link Small Link Small Square Link Square Link Circle Link Outline Link Borderless Link Icon Link Light Link Delete Link

Cheatsheet

Twinkle Buttons – Visual Cheat Sheet

Paste this into an Elementor HTML widget. If your Twinkle CSS is loaded on the page, it will automatically take over styles. Otherwise, this file includes minimal fallback styles so you can preview.

1) Base Patterns

Text only

Primary Action 
<button class="tw-btn">
  <span class="text">Primary Action</span>
</button>

Icon only

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

Icon + text (always visible)

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

2) Responsive Toggle (mobile ↔ desktop)

Default toggle (has-icon-toggle)

Mobile: icon only · Desktop: text only

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

Mobile: icon + text (mobile-both)

Mobile: icon + text · Desktop: text only

Add Document 
<button class="tw-btn has-icon-toggle mobile-both">
  <i class="tw-icon-document-plus" aria-hidden="true"></i>
  <span class="text">Add Document</span>
</button>

Desktop: icon + text (desktop-both)

Mobile: icon only · Desktop: icon + text

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

Icon + text on both (mobile-both desktop-both)

Mobile: icon + text · Desktop: icon + text

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

Desktop: force text only (desktop-text)

Mobile: icon only · Desktop: text only

Delete 
<button class="tw-btn has-icon-toggle desktop-text">
  <i class="tw-icon-trash" aria-hidden="true"></i>
  <span class="text">Delete</span>
</button>

3) Styles & Variants

Primary Outline Borderless Light Delete Small

4) Behavior Matrix

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

  • Add aria-hidden="true" to decorative icons.
  • For icon-only buttons, provide an aria-label.
  • Use short, action-oriented labels (Add, Save, Edit, Delete).
<button class="tw-btn icon-only" aria-label="Save Post">
  <i class="tw-icon-checkmark" aria-hidden="true"></i>
</button>

Design

Picture of Abel Ferro
Abel Ferro

Twinkle System Designer

CDN

Picture of Raul Suarez
Raul Suarez

DevOps Engineer

Scroll to Top