• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Logic button

Component status
Contribution
Current version@spectrum-css/logicbutton@4.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/logicbutton@5.0.0-s2-foundations.13
ReleasedAugust 29, 2024
View repository
GitHub
View package
npm

Usage notes

A LogicButton displays an operator within a boolean logic sequence.

Variants

And
Contribution

Show markup
<button type="button" class="spectrum-LogicButton spectrum-LogicButton--and" style="margin-inline-end: 4px;">And</button>
<button type="button" class="spectrum-LogicButton spectrum-LogicButton--and" disabled>And</button>

Or
Contribution

Show markup
<button type="button" class="spectrum-LogicButton spectrum-LogicButton--or" style="margin-inline-end: 4px;">Or</button>
<button type="button" class="spectrum-LogicButton spectrum-LogicButton--or" disabled>Or</button>

Migration Guide

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.