import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import * as stories from './button.stories.js'; import ElButton from 'element-ui' # Button ## About Buttons Buttons are a vital element in creating a positive and productive user experience. At their most basic, UX buttons are styled links that grab the user’s attention and help drive them in a particular direction. Buttons can link us to other pages or complete an action like “Browse Datasets.” They are often used as calls to actions (CTA) we want our users to complete on our website. ### Primary Button This button is used for a primary call to action {stories.Primary()} #### Code ```html Submit Disabled Button Large Button Medium Button Small Button ``` --- ### Secondary Button This button is used for a non-primary call to action that still needs attention {stories.Secondary()} #### Code ```html Submit Disabled Button ``` --- ### Danger {stories.Danger()} #### Code ```html Submit Disabled Button ``` ### Sizes #### Large Primary call to action, the most important task on the page. Use in the homepage and heros. {stories.ButtonSizes('large', 'Large Button')} ```html Large Button ``` #### Medium Default button, used for non-CTA purposes. {stories.ButtonSizes('', 'Medium Button')} ```html Medium Button ``` #### Small Small buttons are used for supplemental user actions such as filter and modal actions. {stories.ButtonSizes('small', 'Small Button')} ```html Small Button ``` #### Extra Small Extra Small buttons are used for supplemental user actions such as overlaying other components. {stories.ButtonSizes('extra-small', 'Extra Small Button')} ```html Extra Small Button ``` #### Icon Buttons {stories.Icons()} ```html ```