#Adaptive Button Stack

#Adaptiveness

• Stretches it's children (probably buttons) on the extra-small breakpoint (customizable using the stretchBreakpoint prop)

#Stretching

When children are stretched by the stretchBreakpoint prop, they behave differently based on the number of children:

• One or two: children are stacked horizontally and stretched to 50% of the component width
• More: children are stacked vertically and stretched to 100% of the component width

#Split Alignment

adaptiveButtonStackClasses.alignStart can be used to align children at both ends of the stack when stacked horizontally

#API

MUI Stack API with the following changes:

• useFlexGap is always true
• direction is managed internally for the adaptiveness behavior
• justifyContent defaults to flex-end
• spacing defaults to 2

#stretchBreakpoint

Breakpoint or screen width in px and below at which the children will be stretched. This behavior can be disabled by setting it to false

• Type: "xs" | "sm" | "md" | "lg" | number | false
• Default: xs

#Browser Compatibility

• CSS :has()
• CSS :nth-child(of <selector>)
• CSS flex gap

#Links

• Component Source 
  adaptiveButtonStack.tsx
• Doc Source adaptiveButtonStack.mdx
• MUI Stack