Custom Selectors

BreakMade Custom Selectors provide pre-built CSS classes that integrate directly with Breakdance’s selector system.

Registering Selectors

1. Go to BreakMade settings
2. Find the Selectors section
3. Click Add/Update Selectors

Toggle Overwrite Selectors to replace existing selectors instead of merging.

Available Selectors

Button Sizes

.btn-s     /* Small */
.btn-m     /* Medium (default) */
.btn-l     /* Large */

Button Colors

.btn-primary    .btn-secondary    .btn-tertiary
.btn-accent     .btn-black        .btn-white

Button Styles

.btn-light      /* Subtle/light button */
.btn-link       /* Link-style button */
.btn-outline    /* Outlined button */

Utility

.alt-shade      /* Inverted color scheme */

Using Selectors in Breakdance

Method 1: Selector Panel

1. Select an element
2. Open Style panel → Selectors
3. Search btn- to find button selectors
4. Click to apply

Method 2: CSS Classes Field

1. Select an element
2. Find CSS Classes field (in Advanced)
3. Type class names: btn-primary btn-l

Combining Selectors

<a class="btn-primary btn-l">Large Primary</a>
<a class="btn-outline btn-s">Small Outline</a>

Alt-Shade Selector

Inverts your color scheme for contrast sections:

<section class="alt-shade">
  <!-- Children use inverted colors -->
</section>

Double-nesting returns to original colors.

HeadSpin Mode

When HeadSpin Mode is enabled, selectors automatically use --hsp-* variables. Re-register selectors after enabling HeadSpin Mode.

Customizing Selectors

/* Custom button radius */
.btn-primary {
  border-radius: var(--radius-full);
}

/* Add shadow */
.btn-primary {
  box-shadow: 0 4px 14px rgba(var(--primary-base-rgb), 0.4);
}

Troubleshooting

Selectors not appearing?

1. Click Add/Update Selectors
2. Refresh Breakdance editor
3. Search btn- in selector search

Styles not applying?

1. Check for CSS specificity conflicts
2. Inspect element in DevTools
3. Clear caches

Selector Reference

Related

• Color Palette System - Colors used by button selectors
• HeadSpinUI Variables - Using selectors with HeadSpin
• CSS Variables Reference - All available variables