Frap

Notes

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.

Props

  • centerSvgInMiniFrapbool[true]

    If true, SVG will be centered inside the frap.

  • childrennode
  • circularbool

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

  • classNamestring['']
  • disabledbool
  • elementReffunc
  • 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[() => {}]

Fraps

The frapPadding and frapPaddingDouble spacing utility classes can be used on elements to help provide enough room for content when using a frap. Use the scroll bar in each box to see it in effect.

There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text? There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text? There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text? There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text?

There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text? There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text? There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text? There is a lot of content here you really should see. Wouldn't it be a bummer if some button or something was covering up this amazing text?

Rewards Themed

Fraps nested in ThemeContext.Provider with a Rewards Theme it will change style automatically. The markup for the Frap is identical, only the Theme provider wrapping the buttons is different.

Rewards theme