LogicButton

A LogicButton displays an operator within a boolean logic sequence.

installyarn add @react-spectrum/button
version3.0.0-rc.2
usageimport {LogicButton} from '@react-spectrum/button'
View repository
GitHub
View package
NPM

Example#

<LogicButton variant="and">And</LogicButton>
<LogicButton variant="and">And</LogicButton>
<LogicButton variant="and">
  And
</LogicButton>

Content#

LogicButtons must have a variant and optionally can have a label. A visible label can be provided by passing children.

<LogicButton variant="or">Or</LogicButton>
<LogicButton variant="or">Or</LogicButton>
<LogicButton variant="or">
  Or
</LogicButton>

Internationalization#

In order to internationalize a LogicButton, a localized string should be passed to the children or aria-label prop.

Events#

LogicButton supports user interactions via mouse, keyboard, and touch. You can handle all of these via the onPress prop.

The following example uses an onPress handler to update the variant.

function Example() {
  let [variant, setVariant] = React.useState('or');

  return (
    <LogicButton
      variant={variant}
      onPress={() => setVariant(variant === 'or' ? 'and' : 'or')}>
      {variant}
    </LogicButton>
  );
}

function Example() {
  let [variant, setVariant] = React.useState('or');

  return (
    <LogicButton
      variant={variant}
      onPress={() =>
        setVariant(variant === 'or' ? 'and' : 'or')
      }>
      {variant}
    </LogicButton>
  );
}

function Example() {
  let [
    variant,
    setVariant
  ] = React.useState(
    'or'
  );

  return (
    <LogicButton
      variant={variant}
      onPress={() =>
        setVariant(
          variant ===
            'or'
            ? 'and'
            : 'or'
        )
      }>
      {variant}
    </LogicButton>
  );
}

Props#

NameTypeDefaultDescription
variant'and' | 'or'—The type of boolean sequence to be represented by the LogicButton.
type'button' | 'submit' | 'reset'"button"The behavior of the button when used in an HTML form.
isDisabledboolean—Whether the button is disabled
elementTypestring | JSXElementConstructor<any>"button"The HTML element or React element used to render the button, e.g. "div", "a", or RouterLink.
childrenReactNode—The content to display in the button.
hrefstring—A URL to link to if elementType="a".
targetstring—The target window for the link.
autoFocusboolean—Whether the element should receive focus on render
UNSAFE_classNamestring—
UNSAFE_styleCSSProperties—
Events
NameTypeDefaultDescription
onPress( (e: PressEvent )) => void—Handler that is called when the press is released over the target.
onPressStart( (e: PressEvent )) => void—Handler that is called when a press interaction starts.
onPressEnd( (e: PressEvent )) => void—Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressChange( (isPressed: boolean )) => void—Handler that is called when the press state changes.
onPressUp( (e: PressEvent )) => void—Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onFocus( (e: FocusEvent )) => void—Handler that is called when the element receives focus.
onBlur( (e: FocusEvent )) => void—Handler that is called when the element loses focus.
onFocusChange( (isFocused: boolean )) => void—Handler that is called when the element's focus status changes.
onKeyDown( (e: KeyboardEvent )) => void—Handler that is called when a key is pressed.
onKeyUp( (e: KeyboardEvent )) => void—Handler that is called when a key is released.
Layout
NameTypeDefaultDescription
flexstring | number | boolean—
flexGrownumber—
flexShrinknumber—
flexBasisnumber | string—
alignSelf'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'stretch'—
justifySelf'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'—
flexOrdernumber—
gridAreastring—
gridColumnstring—
gridRowstring—
gridColumnStartstring—
gridColumnEndstring—
gridRowStartstring—
gridRowEndstring—
Spacing
NameTypeDefaultDescription
marginDimensionValue—
marginTopDimensionValue—
marginLeftDimensionValue—
marginRightDimensionValue—
marginBottomDimensionValue—
marginStartDimensionValue—
marginEndDimensionValue—
marginXDimensionValue—
marginYDimensionValue—
Sizing
NameTypeDefaultDescription
widthDimensionValue—
minWidthDimensionValue—
maxWidthDimensionValue—
heightDimensionValue—
minHeightDimensionValue—
maxHeightDimensionValue—
Positioning
NameTypeDefaultDescription
position'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'—
topDimensionValue—
bottomDimensionValue—
leftDimensionValue—
rightDimensionValue—
startDimensionValue—
endDimensionValue—
zIndexnumber—
isHiddenboolean—
Accessibility
NameTypeDefaultDescription
idstring—
tabIndexnumber—
aria-expandedboolean—Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-haspopupboolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-pressedboolean—Indicates the current "pressed" state of toggle buttons.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.

Visual options#

Variant#

<LogicButton variant="or" marginRight="20px">Or</LogicButton>
<LogicButton variant="and">And</LogicButton>
<LogicButton variant="or" marginRight="20px">
  Or
</LogicButton>
<LogicButton variant="and">And</LogicButton>
<LogicButton
  variant="or"
  marginRight="20px">
  Or
</LogicButton>
<LogicButton variant="and">
  And
</LogicButton>

Disabled#

<LogicButton variant="or" isDisabled>Or</LogicButton>
<LogicButton variant="or" isDisabled>Or</LogicButton>
<LogicButton
  variant="or"
  isDisabled>
  Or
</LogicButton>