feat(components): [button] add `dashed` prop by lxKylin · Pull Request #22738 · element-plus/element-plus

lxKylin · 2025-11-09T13:05:40Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

Summary by CodeRabbit

New Features
- Added a dashed button style, configurable per-button and globally via ConfigProvider.
Documentation
- Updated Button and ConfigProvider docs to document the dashed attribute (v2.13.3+).
Examples
- Added examples showcasing dashed button variants and a config control for dashed.
Tests
- Added tests verifying dashed styling and config precedence.
Style
- Introduced dashed styling variants and theme support for hover/active/disabled states.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

github-actions · 2025-11-09T13:05:51Z

pkg-pr-new · 2025-11-09T13:07:41Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@22738

npm i https://pkg.pr.new/element-plus/element-plus@22738

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 853fb46

github-actions · 2025-11-09T13:13:27Z

🧪 Playground Preview: https://element-plus.run/?pr=22738
Please comment the example via this playground if needed.

github-actions · 2025-11-23T06:17:59Z

@lxKylin This PR has conflicts, please resolve them.

rzzf · 2025-11-27T08:09:17Z

Based on implementations in other component libraries, I think the background color should be removed for the dashed state. WDYT?

Normal

Hover / Focus

lxKylin · 2025-11-27T11:49:27Z

Based on implementations in other component libraries, I think the background color should be removed for the dashed state. WDYT?

Normal

Hover / Focus

I think so, too.

coderabbitai · 2026-02-01T05:38:18Z

📝 Walkthrough

Walkthrough

Added a new "dashed" styling variant for Button: prop and ConfigProvider support, composable exposure, component class binding, SCSS mixins and theme styles, docs/examples updates, and tests verifying dashed behavior and precedence.

Changes

Cohort / File(s)	Summary
Documentation `docs/en-US/component/button.md`, `docs/en-US/component/config-provider.md`	Documented new `dashed` option (version ^2.13.3) in Button API and ConfigProvider button attributes; updated examples and API tables.
Examples `docs/examples/button/basic.vue`, `docs/examples/config-provider/button.vue`	Added dashed buttons to the basic demo and a dashed checkbox bound to `config.dashed` in the ConfigProvider example.
Component API & Logic `packages/components/button/src/button.ts`, `packages/components/button/src/use-button.ts`, `packages/components/button/src/button.vue`	Added public `dashed` prop, added `dashed` support to ButtonConfigContext, computed `_dashed` in `useButton` (prop → config → false), and applied `.is-dashed` class in the component.
Styling / Theme `packages/theme-chalk/src/mixins/_button.scss`, `packages/theme-chalk/src/button.scss`	Introduced `button-dashed($type)` mixin, added `&.is-dashed` variant, and theme CSS for dashed border and hover/active color variables.
Tests `packages/components/button/__tests__/button.test.tsx`, `packages/components/config-provider/__tests__/config-provider.test.tsx`	Added tests asserting `.is-dashed` class and that component `dashed` prop overrides ConfigProvider `dashed` setting (including nextTick transitions).
Manifest `package.json`	Manifest touched (analyzed in diff context).

Sequence Diagram(s)

sequenceDiagram
    participant App as App / Example
    participant Config as ConfigProvider
    participant Button as ElButton
    participant Use as useButton
    participant Theme as Theme (SCSS)

    App->>Config: provide button config (dashed?: boolean)
    App->>Button: render <el-button :dashed="..."> (may pass prop)
    Button->>Use: resolve dashed (prop ?? Config.dashed ?? false)
    Use-->>Button: return _dashed
    Button->>Theme: render with class .is-dashed when _dashed true
    Theme-->>Button: apply dashed styles (border-style: dashed, hover/active vars)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I nibble code and add a dash,
Little borders leap and flash,
Props and config, hand in paw,
Classes bloom, the styles say "ta-da!" —
A tiny hop, a joyful dash.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description completes the required checklist items but lacks substantive details about the change itself; it only includes a screenshot reference without explanation.	Add a brief description of what the dashed attribute does and why it was added, beyond just checking the contributor checklist items.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'feat(components): [button] add `dashed` prop' accurately and clearly describes the main change: adding a new dashed property to the button component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@docs/en-US/component/config-provider.md`:
- Around line 112-119: Update the button config object signature
`{autoInsertSpace?: boolean, type?: string, plain?: boolean, round?: boolean}`
to include `text?: boolean` and `dashed?: boolean` (with version markers
^(2.11.0) and ^(2.13.3) respectively) so the signature matches the Button
Attribute table; ensure the updated signature reads `{autoInsertSpace?: boolean,
type?: string, plain?: boolean, round?: boolean, text?: boolean ^(2.11.0),
dashed?: boolean ^(2.13.3)}` and keep formatting consistent with the surrounding
docs.

In `@packages/theme-chalk/src/mixins/_button.scss`:
- Around line 63-132: The dashed button mixin button-dashed currently gives type
variants a filled look because each variant's 'bg-color' is set to a light-9
token; change those bg-color entries (inside the $button-color-types map for '',
'hover', and 'active') to use a transparent/blank token instead of 'light-9' so
dashed variants remain border-only, and ensure the disabled block (is-disabled)
still uses the intended getCssVar fallbacks only where a real background is
required; update the map entries referenced by `@each` ($button-color-types) and
the keys 'bg-color' so the included css-var-from-global and subsequent getCssVar
calls pick up the transparent value for dashed types.

Dsaquel

LGTM

github-actions · 2026-02-03T02:40:01Z

@lxKylin Thanks for your contribution! ❤️

feat(components): [input] add the dashed attribute

4c40116

pull-request-triage Bot assigned lxKylin Nov 9, 2025

pull-request-triage Bot added the Needs Review label Nov 9, 2025

github-actions Bot added the Contribution::Community label Nov 9, 2025

docs: update tag

0cfe689

rzzf changed the title ~~feat(components): [input] add the dashed attribute~~ feat(components): [button] add the dashed attribute Nov 11, 2025

btea reviewed Nov 17, 2025

View reviewed changes

Comment thread packages/components/button/src/use-button.ts

refactor: update the documentation of config-provider

e23f2c1

btea reviewed Nov 19, 2025

View reviewed changes

Comment thread packages/components/button/__tests__/button.test.tsx

lxKylin added 2 commits November 19, 2025 18:56

refactor: update config-provider test

37fd8c0

refactor: update button test

54a2c53

rzzf reviewed Nov 22, 2025

View reviewed changes

Comment thread packages/theme-chalk/src/button.scss Outdated

Comment thread packages/components/button/__tests__/button.test.tsx Outdated

rzzf added the conflict pending need to resolve conflicts label Nov 23, 2025

lxKylin added 2 commits November 23, 2025 19:00

refactor: update test

ad1a609

Merge branch 'dev' into input-dashed

6d3f8b3

github-actions Bot removed the conflict pending need to resolve conflicts label Nov 23, 2025

rzzf and others added 2 commits November 23, 2025 19:37

test: update

43df585

refactor: update css

90f30e0

rzzf reviewed Nov 23, 2025

View reviewed changes

Comment thread docs/en-US/component/tabs.md Outdated

refactor: reset

06fbdda

btea approved these changes Nov 24, 2025

View reviewed changes

refactor: update css

b82c22e

btea reviewed Nov 27, 2025

View reviewed changes

Comment thread packages/theme-chalk/src/mixins/_button.scss Outdated

refactor: delete blank lines

4280fd7

rzzf added 2 commits February 1, 2026 13:35

Merge branch 'dev' into input-dashed

ccdec2c

docs: update version

5ffb550

rzzf approved these changes Feb 1, 2026

View reviewed changes

coderabbitai Bot reviewed Feb 1, 2026

View reviewed changes

Comment thread docs/en-US/component/config-provider.md

Comment thread packages/theme-chalk/src/mixins/_button.scss

rzzf added 2 commits February 1, 2026 13:48

docs: update button type

02aac04

docs: update button type

853fb46

rzzf requested review from Dsaquel and keeplearning66 February 1, 2026 06:42

Dsaquel approved these changes Feb 2, 2026

View reviewed changes

rzzf changed the title ~~feat(components): [button] add the dashed attribute~~ feat(components): [button] add dashed prop Feb 3, 2026

rzzf merged commit f154ce2 into element-plus:dev Feb 3, 2026
17 checks passed

element-bot mentioned this pull request Feb 28, 2026

D2M #23702

Merged

3 tasks

Uh oh!

Conversation

lxKylin commented Nov 9, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Nov 23, 2025

Uh oh!

Uh oh!

rzzf commented Nov 27, 2025

Uh oh!

lxKylin commented Nov 27, 2025

Uh oh!

Uh oh!

coderabbitai Bot commented Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Dsaquel left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Feb 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lxKylin commented Nov 9, 2025 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Nov 9, 2025 •

edited

Loading

pkg-pr-new Bot commented Nov 9, 2025 •

edited

Loading

github-actions Bot commented Nov 9, 2025 •

edited

Loading

coderabbitai Bot commented Feb 1, 2026 •

edited

Loading