<.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>