Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Will display what is this component about with a simple intro text like: "Radio is a type of selector that is used when we have a list of options, and only one option can be selected."
The Icon and Badge components have similar behavior.
Both receive two inputs as props, where type indicates which symbol to show, while color defines its color. Badge receives an extra prop wrapperColor, since the background color is different from the symbol color. Also, the size option is available only for Icon
Go to Setup for instructions on how to import the component.
| Name | Description | Default |
|---|---|---|
| type* | Type of the Icon to be rendered. "arrow-down""arrow-left""arrow-right""arrow-top""calendar""coin""collapse-closed""collapse-open" | - |
| color | Color of the rendered Icon. "white""black-75""mineral-10""mineral-20""mineral-30""mineral-40""mineral-60""mineral-70" | - |
| size | Size of the rendered Icon, petit = 16px, small = 20px. If omitted will render at 24px. "small""petit" | - |
| className | Add a class name to make custom changes string | - |
| Name | Description | Default |
|---|---|---|
| type* | Type of the Badge to be rendered. "floating-add""harvest""meta""ponto""star" | - |
| color | Color of the Badge's inner icon. "white""black""black-75""mineral-10""mineral-20""mineral-30""mineral-40""mineral-60" | - |
| wrapperColor | Defines the Badge's wrapper background color. "white""black""black-75""mineral-10""mineral-20""mineral-30""mineral-40""mineral-60" | - |
| className | Add a class name to make custom changes string | - |
The default color for icons and badges is mineral, but you can attribute a diferent one passing the color prop. If you want to change the default theme color, go to the scss/variables/_settings.scss file.
All the available Icons are shown below. You can use them with all the colors available on the design system.
All the available Badges are shown below. You can use all the colors available on the design system for the props color and wrapperColor.