Skip to content

button--floating

Varianten

PropertyOptionenDefault
StatePressed, Default, HoverDefault

Design Tokens

VariantCSS PropertyToken
State=DefaultbackgroundSurface/main
State=DefaultbackgroundText/main
State=Defaultborder-colorNeutral [previous secondary]/main
State=Defaultbox-shadowHigh/Key/Blur
State=Defaultbox-shadowHigh/Key/Color & Opacity
State=Defaultbox-shadowHigh/Ambient/Color & Opacity
State=Defaultbox-shadowHigh/Ambient/Offset X
State=Defaultbox-shadowHigh/Ambient/Blur
State=Defaultbox-shadowHigh/Key/Offset X
State=Defaultbox-shadowHigh/Ambient/Offset Y
State=Defaultbox-shadowHigh/Key/Spread
State=Defaultbox-shadowHigh/Ambient/Spread
State=Defaultbox-shadowHigh/Key/Offset Y
State=DefaultgapGap/xs
State=Defaultpadding-bottomPadding/sm
State=Defaultpadding-leftPadding/sm
State=Defaultpadding-rightPadding/sm
State=Defaultpadding-topPadding/sm
State=HoverbackgroundNeutral [previous secondary]/transparency
State=HoverbackgroundText/main
State=Hoverborder-colorNeutral [previous secondary]/strong
State=Hoverbox-shadowHigh/Key/Blur
State=Hoverbox-shadowHigh/Key/Color & Opacity
State=Hoverbox-shadowHigh/Ambient/Color & Opacity
State=Hoverbox-shadowHigh/Ambient/Offset X
State=Hoverbox-shadowHigh/Ambient/Blur
State=Hoverbox-shadowHigh/Key/Offset X
State=Hoverbox-shadowHigh/Ambient/Offset Y
State=Hoverbox-shadowHigh/Key/Spread
State=Hoverbox-shadowHigh/Ambient/Spread
State=Hoverbox-shadowHigh/Key/Offset Y
State=HovergapGap/xs
State=Hoverpadding-bottomPadding/sm
State=Hoverpadding-leftPadding/sm
State=Hoverpadding-rightPadding/sm
State=Hoverpadding-topPadding/sm
State=PressedbackgroundNeutral [previous secondary]/transparency
State=PressedbackgroundText/main
State=Pressedborder-colorNeutral [previous secondary]/strong
State=Pressedbox-shadowHigh/Key/Blur
State=Pressedbox-shadowHigh/Key/Color & Opacity
State=Pressedbox-shadowHigh/Ambient/Color & Opacity
State=Pressedbox-shadowHigh/Ambient/Offset X
State=Pressedbox-shadowHigh/Ambient/Blur
State=Pressedbox-shadowHigh/Key/Offset X
State=Pressedbox-shadowHigh/Ambient/Offset Y
State=Pressedbox-shadowHigh/Key/Spread
State=Pressedbox-shadowHigh/Ambient/Spread
State=Pressedbox-shadowHigh/Key/Offset Y
State=PressedgapGap/xs
State=Pressedpadding-bottomPadding/sm
State=Pressedpadding-leftPadding/sm
State=Pressedpadding-rightPadding/sm
State=Pressedpadding-topPadding/sm

Beschreibung

Do / Don't

Angular Usage

html
<!-- Beispiel-Code einfügen -->
typescript
// Input-Beispiel falls relevant

Accessibility

Notizen

CR4FT Design System — auto-synced from Figma