Doggo Storybook 0.9.0

Button

Renders a button.

Read more Read less

Use this component when you need to perform an action such as submitting a form, confirming an action, deleting an item, toggling a setting, etc.

If you need to navigate to a different page or a specific section on the current page and want to style the link like a button, use button_link/1 instead.

See also button_link/1, toggle_button/1, and disclosure_button/1.

Usage

<.button>Confirm</.button>

<.button type=”submit”> Submit </.button>

To indicate a loading state, for example when submitting a form, use the aria-busy attribute:

<.button aria-label="Saving..." aria-busy>
  click me
</.button>
Default Open in playground 
<.button>
  click me
</.button>
Disabled Open in playground 
<.button disabled>
  click me
</.button>
Busy Open in playground 
<.button aria-label="Saving..." aria-busy={true}>
  click me
</.button>
Variant Open in playground 
<.button variant="primary">
  primary
</.button>
<.button variant="secondary">
  secondary
</.button>
<.button variant="info">
  info
</.button>
<.button variant="success">
  success
</.button>
<.button variant="warning">
  warning
</.button>
<.button variant="danger">
  danger
</.button>
Size Open in playground 
<.button size="small">
  small
</.button>
<.button size="normal">
  normal
</.button>
<.button size="medium">
  medium
</.button>
<.button size="large">
  large
</.button>
Fill Open in playground 
<.button fill="solid">
  solid
</.button>
<.button fill="outline">
  outline
</.button>
<.button fill="text">
  text
</.button>
Shape Open in playground 
<.button shape={nil}>
  nil
</.button>
<.button shape="circle">
  circle
</.button>
<.button shape="pill">
  pill
</.button>