Material “ink ripple” interaction effect.

Ripples come in two variants. Use ripple for bounded ripple effects which work best when used for contained surfaces, and unboundedRipple for unbounded ripple effects which work best with icons.

Table of Contents

• Resources
• Basic Usage
• Bounded Ripple
• Unbounded Ripple
• Colored Ripple

Resources

• Demo: Ripples
• Material Design Guidelines: States
• MDC Web: Ripple
• Sass Mixins (MDC Web)

Basic Usage

import Material.Ripple exposing (ripple, rippleConfig)


main =
    Html.div []
        [ text "Click me!"
        , boundedRipple rippleConfig
        ]

Bounded Ripple

Unbounded Ripple

Html.span []
    [ unboundedRipple rippleConfig
    , text "🙌"
    ]

Colored Ripple

If you want to set the ripple effect to either primary or secondary color, set its color configuration field to a RippleColor.

ripple { rippleConfig | color = Ripple.PrimaryColor }