HomeStarbucks Pattern Library



A FRAP (Floating Resizable Action Pill) is a continuation of Material Design's FAB: Floating Action Button. Unlike the FAB, it includes clear text, never an icon, in order to make every action clear and unambigous.

It's a button-like element that is typically the primary action forward in a screen/workflow. It persistently conveys a user's next best action by floating at the highest possible element elevation, always locked to the bottom right of the screen.

The FRAP and Mini FRAP can be paired to deliver two distinct and immediately available actions at key points within the order flow. Mini FRAPs have the same elevation and interactive properties as FRAPS, however they may contain an icon or sometimes an icon paired with text.

Like Button, it renders button tags by default or a if href is provided. It also supports an arbitrary tagName prop for advanced usage, which can support HTML tag names or React components like Link.


  • centerSvgInMiniFrapbool[true]

    If true, SVG will be centered inside the frap.

  • childrennode
  • circularbool

    If true, sets a circular background behind the actual element.

  • classNamestring['']
  • coloroneOf('greenAccent', 'white', 'houseGreen')['greenAccent']

    Sets background color to either green accent, house green, or white. Defaults to green accent. Text color will be set based on which option is chosen.

  • disabledbool
  • hrefstring
  • loadingbool[false]

    If true, it shows a loading animation inside the frap. Not shown if it's a mini frap or it's disabled.

  • minibool[false]

    If true, limits height and changes foreground/background colors.

  • tagNameany

    Permits use of any HTML element or React component as a frap. Defaults to button, or a if an href is present.

  • onClick[() => {}]

Example: Fraps

Example: Rewards Themed

Example: Icon and Text Frap