Alert([
  Icon(
    'info',
    style: [TextUtil.info, Flex.shrink0, Size.w(6), Size.h(6)],
  ),
  span([text('12 unread messages. Tap to see.')]),
])

Alert(
  [
    // The Icon's color is inherited from the Alert's text color.
    Icon(
      'info',
      style: [Flex.shrink0, Size.w(6), Size.h(6)],
    ),
    span([text('New software update available.')]),
  ],
  style: [Alert.info],
)

Alert(
  [
    // The Icon's color is inherited from the Alert's text color.
    Icon(
      'check_circle',
      style: [Flex.shrink0, Size.w(6), Size.h(6)],
    ),
    span([text('Your purchase has been confirmed!')]),
  ],
  style: [Alert.success],
)

Alert(
  [
    // The Icon's color is inherited from the Alert's text color.
    Icon(
      'warning',
      style: [Flex.shrink0, Size.w(6), Size.h(6)],
    ),
    span([text('Warning: Invalid email address!')]),
  ],
  style: [Alert.warning],
)

Alert(
  [
    // The Icon's color is inherited from the Alert's text color.
    Icon(
      'error',
      style: [Flex.shrink0, Size.w(6), Size.h(6)],
    ),
    span([text('Error! Task failed successfully.')]),
  ],
  style: [Alert.error],
)

Alert([/* content */], style: [Alert.info, Alert.soft]),
Alert([/* content */], style: [Alert.success, Alert.soft]),
Alert([/* content */], style: [Alert.warning, Alert.soft]),
Alert([/* content */], style: [Alert.error, Alert.soft]),

Alert([/* content */], style: [Alert.info, Alert.outline]),
Alert([/* content */], style: [Alert.success, Alert.outline]),
Alert([/* content */], style: [Alert.warning, Alert.outline]),
Alert([/* content */], style: [Alert.error, Alert.outline]),

Alert([/* content */], style: [Alert.info, Alert.dash]),
Alert([/* content */], style: [Alert.success, Alert.dash]),
Alert([/* content */], style: [Alert.warning, Alert.dash]),
Alert([/* content */], style: [Alert.error, Alert.dash]),

Alert(
  [
    Icon(
      'info',
      style: [TextUtil.info, Flex.shrink0, Size.w(6), Size.h(6)],
    ),
    span([text('we use cookies for no reason.')]),
    div([
      Button([text('Deny')], style: [Button.sm]),
      Button([text('Accept')], style: [Button.sm, Button.primary]),
    ]),
  ],
  // Use the fluent API for responsive layout changes.
  style: [Alert.vertical, Alert.horizontal.at(Breakpoint.sm)],
)

Alert(
  [
    Icon(
      'info',
      style: [TextUtil.info, Flex.shrink0, Size.w(6), Size.h(6)],
    ),
    div([
      h3([text('New message!')], classes: 'font-bold'),
      div([text('You have 1 unread message')], classes: 'text-xs'),
    ]),
    Button([text('See')], style: [Button.sm]),
  ],
  style: [Alert.vertical, Alert.horizontal.at(Breakpoint.sm)],
)