Noora (0.3.1)

Alert

Alert types: primary (default) for standard alerts, secondary for less prominent alerts Open in playground
Insert your text here
Insert your text here 
<.alert
  id="alert--type-primary"
  status="error"
  type="primary"
  title="Insert your text here"
/>
<.alert
  id="alert--type-secondary"
  status="error"
  type="secondary"
  title="Insert your text here"
/>
Sizes: small (compact), medium (standard), large (with description support) Open in playground
Insert your text here
Insert your text here
Insert your text here Insert your description here. Description in this case is usually two lines 
<.alert id="alert-size-small" size="small" status="error" title="Insert your text here"/>
<.alert
  id="alert-size-medium"
  size="medium"
  status="error"
  title="Insert your text here"
/>
<.alert
  id="alert-size-large"
  size="large"
  status="error"
  description="Insert your description here. Description in this case is usually two lines"
  title="Insert your text here"
/>
Status variations for primary alerts: error, information, success, warning Open in playground
Insert your text here
Insert your text here
Insert your text here
Insert your text here 
<.alert id="alert-status-primary-error" status="error" title="Insert your text here"/>
<.alert
  id="alert-status-primary-information"
  status="information"
  title="Insert your text here"
/>
<.alert id="alert-status-primary-success" status="success" title="Insert your text here"/>
<.alert id="alert-status-primary-warning" status="warning" title="Insert your text here"/>
Status variations for secondary alerts: error, information, success, warning Open in playground
Insert your text here
Insert your text here
Insert your text here
Insert your text here 
<.alert
  id="alert-status-secondary-error"
  status="error"
  type="secondary"
  title="Insert your text here"
/>
<.alert
  id="alert-status-secondary-information"
  status="information"
  type="secondary"
  title="Insert your text here"
/>
<.alert
  id="alert-status-secondary-success"
  status="success"
  type="secondary"
  title="Insert your text here"
/>
<.alert
  id="alert-status-secondary-warning"
  status="warning"
  type="secondary"
  title="Insert your text here"
/>
Dismissible alerts with close button for different sizes Open in playground
Insert your text here
Insert your text here
Insert your text here Insert your description here. Description in this case is usually two lines 
<.alert
  id="alert-dismissible-dismissible-small"
  size="small"
  status="error"
  title="Insert your text here"
  dismissible
/>
<.alert
  id="alert-dismissible-dismissible-medium"
  size="medium"
  status="error"
  title="Insert your text here"
  dismissible
/>
<.alert
  id="alert-dismissible-dismissible-with-actions"
  size="large"
  status="error"
  description="Insert your description here. Description in this case is usually two lines"
  title="Insert your text here"
  dismissible
/>
Alerts with action buttons for small and large sizes Open in playground
Insert your text here
Insert your text here Insert your description here. Description in this case is usually two lines 
<.alert
  id="alert-with-actions-with-actions-small"
  size="small"
  status="error"
  title="Insert your text here"
>
  <:action><.link_button size="medium" variant="secondary" underline label="Action" /></:action>
</.alert>
<.alert
  id="alert-with-actions-with-actions-large"
  size="large"
  status="error"
  description="Insert your description here. Description in this case is usually two lines"
  title="Insert your text here"
>
  <:action><.link_button size="large" variant="secondary" underline label="Action" /></:action>
</.alert>
Edge cases and special scenarios Open in playground
This is a very long title that might wrap to multiple lines in smaller containers or on mobile devices to test text wrapping behavior
Important Notice This is a very long description that contains multiple sentences and important information. It should properly wrap and maintain readability even when the content extends beyond the typical two-line description. This helps test the layout behavior with extensive content.
Operation completed successfully 
<.alert
  id="alert-edge-cases-long-title"
  status="information"
  title="This is a very long title that might wrap to multiple lines in smaller containers or on mobile devices to test text wrapping behavior"
/>
<.alert
  id="alert-edge-cases-long-description"
  size="large"
  status="warning"
  description="This is a very long description that contains multiple sentences and important information. It should properly wrap and maintain readability even when the content extends beyond the typical two-line description. This helps test the layout behavior with extensive content."
  title="Important Notice"
/>
<.alert
  id="alert-edge-cases-dismissible-with-actions-medium"
  size="medium"
  status="success"
  title="Operation completed successfully"
  dismissible
>
  <:action><.link_button size="medium" variant="secondary" underline label="View Details" /></:action>
  <:action><.link_button size="medium" variant="secondary" underline label="Dismiss" /></:action>
</.alert>