import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { ButtonExamples } from './examples/button_examples';
import { Button } from '../../src/button/button';
# Button
Buttons are elements users interacts frequently with.
It is important to choose the right props for any given application.
## Props
### Color
The button's colors will be based on this value.
### Variant
Different variants exists for different situations.
This component have three main variants.
#### ↳ _``text (default)``_
Used by default, this variant should be used for less-pronounced actions.
Usage example:
- Dialog Actions.
- Card Actions (including PopperCard).
#### ↳ _``outlined``_
This variant is more pronounced than ``text`` but less than ``contained``.
Use it when its background is not plain or if displayed on shadowed surfaces.
#### ↳ _``contained``_
This variant is more pronounced than any other.
Use it for important actions which might require user's attention.
#### ↳ _``raised``_
This variant is more pronounced than any other.
Use it for important actions which might require user's attention.
#### ↳ _``soft``_
This variant is less pronounced than the contained one.
Use it for less important actions which might still require user's attention.