<.message id="message-single-default-message" message="Did you know that?" type={:hint} description="Neither did we 🤷" icon_class="fad fa-skull" dismissable/>

<.message id="message-all-types-hint" message="We have a (latin) message for you!" type={:hint} description="Lorem ipsum dolor sit amet, consectetur adipiscing." dismissable>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:hint} outline={true}
  />
</.message>
<.message id="message-all-types-info" message="We have a (latin) message for you!" type={:info} description="Lorem ipsum dolor sit amet, consectetur adipiscing." dismissable>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:info} outline={true}
  />
</.message>
<.message id="message-all-types-success" message="We have a (latin) message for you!" type={:success} description="Lorem ipsum dolor sit amet, consectetur adipiscing." dismissable>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:success} outline={true}
  />
</.message>
<.message id="message-all-types-error" message="We have a (latin) message for you!" type={:error} description="Lorem ipsum dolor sit amet, consectetur adipiscing." dismissable>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:error} outline={true}
  />
</.message>
<.message id="message-all-types-warning" message="We have a (latin) message for you!" type={:warning} description="Lorem ipsum dolor sit amet, consectetur adipiscing." dismissable>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:warning} outline={true}
  />
</.message>

<.message id="message-inline-messages-hint" message="We have a (latin) message for you!" type={:hint} description="Lorem ipsum dolor sit amet, consectetur adipiscing." inline>
  <.button text="Got it" icon="fa fa-check"
    color={:hint} outline={true}
  />
</.message>
<.message id="message-inline-messages-info" message="We have a (latin) message for you!" type={:info} description="Lorem ipsum dolor sit amet, consectetur adipiscing." inline>
  <.button text="Got it" icon="fa fa-check"
    color={:info} outline={true}
  />
</.message>
<.message id="message-inline-messages-success" message="We have a (latin) message for you!" type={:success} description="Lorem ipsum dolor sit amet, consectetur adipiscing." inline>
  <.button text="Got it" icon="fa fa-check"
    color={:success} outline={true}
  />
</.message>
<.message id="message-inline-messages-error" message="We have a (latin) message for you!" type={:error} description="Lorem ipsum dolor sit amet, consectetur adipiscing." inline>
  <.button text="Got it" icon="fa fa-check"
    color={:error} outline={true}
  />
</.message>
<.message id="message-inline-messages-warning" message="We have a (latin) message for you!" type={:warning} description="Lorem ipsum dolor sit amet, consectetur adipiscing." inline>
  <.button text="Got it" icon="fa fa-check"
    color={:warning} outline={true}
  />
</.message>