Waffle Design System

PseudoBox

This component is inspired by Tailwind CSS Pseudo-Class variants and Glamorous Pseudo.

PseudoBox composes Box component and provides props to style common CSS pseudo selectors.

Styling elements on hover, focus, and more can be accomplished by prefixing _ with the appropriate pseudo selector.

For example, to style &:hover, use the _hover prop and pass the style props. We use the underscore _ notation to visually separate pseudo style props from regular style props.

Import

Usage

Editable Example

PseudoBox includes first-class support for styling elements on hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, focus-within, and more.

It was created to help reduce the need to pass css prop or use styled(...) function to style common pseudo states.

Hover

Add the _hover prop to only apply style props on hover.

Editable Example

Focus

Add the _focus prop to only apply a styles on focus.

Editable Example

Active

Add the _active prop to only apply a styles on active.

Editable Example

Disabled

Add the _disabled prop to style an element when it is disabled. This style will apply when the disabled or aria-disabled attribute of an element is set to true

Editable Example

Visited

Add the _visited props to style a link that has been visited.

Editable Example

First Child

Add the _first prefix to style an element when it is the first-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Last Child

Add the _last prefix to style an element when it is the last-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Odd Child

Add the _odd prop to style an element when it is the odd-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Even Child

Add the _even prop to style an element when it is the even-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Group Hover

If you need to style a child element when hovering over a specific parent element, add the role="group" attribute to the parent element, then you can use _groupHover prop to style the child element.

New Project
Create a new project from a variety of starting templates.
Editable Example

Selectors and Props

PseudoBox can be used to style any interactive component. You can apply styles to the following selectors. The selectors are also ARIA-friendly to help you naturally use aria attributes for better accessibility.

All PseudoBox props can use the style props. Learn more about Style props

SelectorProp
&:hover_hover
&:active_active
&:focus_focus
&:before_before
&:after_after
&::placeholder_placeholder
&:first-of-type_first
&:last-of-type_last
[role=group]:hover &_groupHover
&:disabled, [aria-disabled=true]_disabled
&[readonly], &[aria-readonly=true]_readonly
&[aria-checked=true]_checked
&[aria-selected=true]_selected
&[aria-expanded=true]_expanded
&[aria-invalid=true]_invalid
&[aria-pressed=true]_pressed
&[aria-invalid=true]_invalid
&[aria-grabbed=true]_grabbed
Waffle Design SystemBlockstack PBC