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>

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>

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>
  );
}

Props#

NameTypeDefaultDescription
variant'and' | 'or'—The type of boolean sequence to be represented by the LogicButton.
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 interation 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
rolestring—
idstring—
tabIndexnumber—
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-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-ownsstring—Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-hiddenboolean | 'false' | 'true'—Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Visual options#

Variant#

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

Disabled#

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