The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.
import React from 'react' import { Button } from '../../' const ButtonDefault = (props) => ( <div> <Button marginRight="xl" onClick={() => alert('button clicked!')} text="Button Primary" {...props} /> {' '} <Button onClick={() => alert('button clicked!')} text="Button Secondary" variant="secondary" {...props} /> {' '} <Button onClick={() => alert('button clicked!')} text="Button Link" variant="link" {...props} /> <Button disabled onClick={() => alert('button clicked!')} text="Button Disabled" {...props} /> </div> ) export default ButtonDefault
This button is used many times for mobile or other things like cards and sidebars.
import React from 'react' import { Button } from '../../' const ButtonFullWidth = (props) => ( <div> <Button fullWidth text="Button Full Width" {...props} /> </div> ) export default ButtonFullWidth
import React from 'react' import { Button } from '../../' const ButtonLink = (props) => ( <div> <Button aria={{ label: 'Link to Google' }} link="https://google.com" text="A Tag Button" {...props} /> {' '} <Button aria={{ label: 'Link to Google in new window' }} link="https://google.com" newWindow text="Open in New Window" {...props} /> {' '} <Button aria={{ label: 'Disabled link to Google' }} disabled link="https://google.com" text="A Tag Button Disabled" {...props} /> </div> ) export default ButtonLink
Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading.
import React from 'react' import { Button } from '../../' const ButtonLoading = (props) => ( <div> <Button aria={{ label: 'Loading' }} loading text="Button Primary" {...props} /> {' '} <Button aria={{ label: 'Loading' }} loading text="Button Secondary" variant="secondary" {...props} /> {' '} <Button aria={{ label: 'Loading' }} loading text="A Tag Button Disabled" variant="link" {...props} /> </div> ) export default ButtonLoading
import React from 'react' import { Button } from '../../' const ButtonBlockContent = (props) => ( <div> <Button fixedWidth icon="users" text="Button with Block Content" {...props} /> </div> ) export default ButtonBlockContent
import React from 'react' import { Button } from '../../' const ButtonAccessibility = (props) => ( <div> <Button aria={{ label: 'Go to Google' }} link="https://google.com" tag="a" text="Button with ARIA" {...props} /> </div> ) export default ButtonAccessibility
import React from 'react' import Button from '../_button' const ButtonOptions = (props) => ( <div> <Button htmlType="submit" onClick={() => alert('Click!')} text="Button with options" value="1234" {...props} /> </div> ) export default ButtonOptions
By default button has the md
size style, even if you don't explicitly pass a size prop.
import React from 'react' import { Button } from '../../' const ButtonSize = (props) => ( <div> <Button size="sm" text="Button sm size" {...props} /> {' '} <Button size="md" text="Button md size" {...props} /> {' '} <Button size="lg" text="Button lg size" {...props} /> </div> ) export default ButtonSize
import React from 'react' import { Button } from '../../' const ButtonForm = (props) => ( <div> <Button form="form-id" text="Button with Form Attribute" {...props} /> </div> ) export default ButtonForm
Never use more than one primary button on a page at any given time.