Mastering Button Component Design: Naming, Extensibility, and Best Practices

Button Naming

Before writing code, communicate with designers to understand their perspective on component extensions, avoiding costly mismatches caused by inconsistent design and implementation.

When creating a button, developers often copy existing code and adjust colors or font sizes, but as projects grow, a global design approach is needed to ensure extensibility.

.btn-header : based on location

.btn-red : based on color

.btn-download : based on function

These quick solutions are based on the current scenario and simply describe differences between buttons.

Choosing the best naming strategy, the article recommends using color-based names for simplicity.

Button Design Should Return to Design

Collaboration with designers is essential; if designers provide multiple red buttons, discuss alternative colors.

While design drives UI, developers should also propose solutions. The article highlights Bootstrap as a widely adopted UI framework with international conventions for button encapsulation.

Code Structure

<code>_var.scss      // parameters
_base.scss     // base styles
_theme.scss    // theme
_size.scss     // size
_shape.scss    // shape
_status.scss   // status
index.scss      // imports all files</code>

The _var.scss file typically references a global parameters file.

Button Base Styles ( _base.scss )

<code>.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 3px;
  border: none;
}</code>

Base styles are consistent across extensions.

Classification

Buttons can be categorized by theme, size, shape, and status, and these categories can be combined.

Theme: primary, secondary, success, danger, warning

Size: large, middle, default, small

Shape: link, ghost, capsule, block

Status: disabled, hover, active, focus, loading

Example: a large, disabled, warning, ghost button.

Note: Classification is for code organization; modify the corresponding SCSS file when extending a specific aspect.

Native CSS

<code>&lt;button type="button" disabled class="btn _warning _ghost _large"&gt;warning按钮&lt;/button&gt;
&lt;a href="javascript:;" class="btn _warning _disabled _ghost _large"&gt;warning按钮&lt;/a&gt;</code>

Component Frameworks

<code>&lt;Button warning disabled ghost large&gt;React按钮&lt;/Button&gt;</code>

In React or Vue, use single-attribute props to extend components.

<code>&lt;Button theme="warning" status="disabled" shape="ghost" size="large"&gt;按钮&lt;/Button&gt;</code>

Different UI libraries have varied APIs, but the underlying logic remains similar.

Advantages of Bool Props

Original approach used single class; bool props move this logic to attributes.

Cleaner: fewer lines of code for the same functionality.

Ease of use: developers only need to know prop names.

Simplifies development: no need to consider classification when extending.

Logical simplicity: properties can be combined freely.

Disadvantages of Bool Props

Complex validation logic for many bool attributes.

Potential for incorrect combinations.

May conflict with designers' mental model of color categories.

Increases the number of global variables.

Not suitable when themes are provided via a theme provider.

The article still recommends bool props as the primary extension method, allowing classification when necessary.

Button Theme ( _theme.scss )

Themes are functionally distinguished, often using colors. Bootstrap defines nine predefined styles (primary, secondary, success, danger, warning, info, light, dark, link). The article suggests focusing on five core themes (primary, secondary, success, danger, warning) for most scenarios.

<code>._primary { background-color: $c_primary; color: #fff; }
.btn { color: #fff; }
.btn._ghost { background-color: transparent; border: 1px solid; }
.btn._link { background-color: transparent; }</code>

Theme colors should be derived from global color variables prefixed with c_ .

Button Size ( _size.scss )

Recommended sizes: large, middle, default, small. Follow an 8‑point grid for dimensions and font sizes.

<code>.btn { height: 40px; font-size: 16px; line-height: 24px; padding: 8px 16px; }
.btn._middle { height: 32px; font-size: 14px; padding: 4px 12px; }</code>

Button Shape ( _shape.scss )

Fill: solid background, white text.

Link: transparent background, colored text.

Ghost: transparent background, colored border.

Capsule: fully rounded corners.

Block: full‑width block element.

<code>.btn._fill { color: #fff; }
.btn._link { background-color: transparent; }
.btn._ghost { background-color: transparent; border: 1px solid; line-height: 24px - 1px; }
.btn._capsule { border-radius: 100px; }
.btn._block { display: block; width: 100%; }</code>

Button Status ( _status.scss )

Common states: disabled, hover, active, focus, loading. Use transition for smooth changes.

<code>.btn { transition: 200ms; }
.btn:disabled, .btn._disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
.btn._primary:hover { background-color: darken($c_primary, 10%); color: darken($c_primary, 10%); }
.btn:active { transform: scale(0.98); }
button { outline: none; }</code>

Focus state is important for accessibility; avoid removing it without a suitable replacement.

Loading state can be represented with CSS animations or pseudo‑elements to avoid heavy GIF assets.

Advanced Buttons

When more complex button variants are needed, extend the base button rather than modifying it directly, reducing code bloat and coupling.

<code>&lt;Button small warning&gt;基础按钮&lt;/Button&gt;
&lt;ButtonPop small warning popNum="3"&gt;高级气泡按钮&lt;/ButtonPop&gt;</code>

Advantages: controlled code growth and easier removal of specific advanced components.

Conclusion

Effective button design requires early and continuous communication with designers, thoughtful naming conventions, and a clean, modular CSS architecture. Adopt practices that suit your project while remaining flexible for future extensions.