Welcome to Astro
Button Component Demo
All Button Variants (Redesign)
Dark Mode Variants
With Icons & Chevrons
Disabled States
Legacy Variants (Non-Redesign)
Layer Components
LayerNext with Clipping
LayerNext Content
This layer has clipping on medium screens and above.
LayerNext Top Clipping Options
Top Clip Flat
Props used: clipTop="flat"
Top Clip Flush
Props used: clipTop="flush"
Top Clip Slope Left
Props used: clipTop="slopeLeft"
Top Clip Slope Right
Props used: clipTop="slopeRight"
Top Clip Jag Left
Props used: clipTop="jagLeft"
Top Clip Jag Right
Props used: clipTop="jagRight"
LayerNext Bottom Clipping Options
Bottom Clip Flat
Props used: clipBottom="flat"
Bottom Clip Flush
Props used: clipBottom="flush"
Bottom Clip Slope Left
Props used: clipBottom="slopeLeft"
Bottom Clip Slope Right
Props used: clipBottom="slopeRight"
Bottom Clip Jag Left
Props used: clipBottom="jagLeft"
Bottom Clip Jag Right
Props used: clipBottom="jagRight"
LayerNext Background Variations
Solid Background Color
Props used: backgroundColor=#1A1A1A
Background Image (Cover)
Props used: backgroundImageCover=true, image passed as children
Custom Background CSS
Props used: backgroundCSS="linear-gradient(45deg, #FF6B6B, #4ECDC4)"
LayerNext Layout Options
With Top Padding
Props used: paddingTop=true
With Bottom Padding
Props used: paddingBottom=true
Without Container
Props used: disableContainer=true
LayerNext Special Features
Light Text Type
Props used: lightType=true
Custom Z-Index
Props used: zIndex=10
Combined Features
Props used: clipTop="flat" backgroundImageCover=true lightType=true paddingTop=true paddingBottom=true, image passed as children