Skip to Navigation
Skip to Navigation

Trial Bars

Markup | Source | Edit

Trial bar components are used to provide an interactive and educational prospect experience for setup.

Interactive Examples

Base

30days left in trial

Need more examples? Find a bug?

For even more examples, please take a preview of our development environment built on the popular Storybook platform that is an always up-to-date deploy of this repository's master branch. All example code on this page can be found in the /components/trial-bar/__examples__/ folder. Storybook example code can be found in /components/trial-bar/__docs__/storybook-stories.jsx.

Property Details

All public, supported component props are listed below. If you believe there is a clearer way to describe a property, please submit a pull request. Property descriptions are built from source code comments (written in Markdown) located within propTypes objects which are typically found in each component's index.jsx. Pull requests to update these descriptions can easily be done without cloning this repository by clicking "Edit this file" in the Github user interface.

NameTypeRequiredDefaultDescription
childrennode

Provide children of the types <TrialBarButton /> or <TrialBarDropdown /> to define the structure of the trial bar.

<TrialBar>
  <TrialBarButton />
  <TrialBarDropdown />
</TrialBar>
classNameunion

CSS classes to be added to the component. Uses classNames API.

labelsshape

{ timeLeftUnitAfter: left in trial, }

Text labels for internationalization This object is merged with the default props object on every render.

  • learnMoreAfter: Amount of time left in trial, e.g. 30
  • learnMoreBefore: Unit of the amount of time left, e.g. days
  • timeLeftUnitAfter: String after timeLeftUnit
onRenderActionsfunc

Renders the actions section of the trial bar.

styleobject

Customs styles to be applied to the component.

Related Sub-Components

Button

A Button within the Trial Bar.

Dropdown

A Dropdown within the Trial Bar.