Triangle Alert

A triangle-shaped alert banner for warnings and notices. Uses clip-path: polygon(50% 0%, 0% 100%, 100% 100%), supports yellow/orange/red tones, and an optional dismiss button.

Preview

<script>
  import { TriangleAlert } from '@vultra/flat';
</script>

<div class="flex flex-col gap-6">
  <TriangleAlert message="Warning: disk space is running low" />
  <TriangleAlert message="Heads up: new version available" color="yellow" />
  <TriangleAlert message="Maintenance window tonight at 2 AM" color="orange" dismissable />
</div>

Usage

<script>
  import { TriangleAlert } from '@vultra/flat';
</script>

<TriangleAlert
  message="Your subscription renews in 3 days"
  color="orange"
  dismissable
  ondismiss={handleDismiss}
/>

Props

Prop	Type	Default	Description
message	string	—	Alert message text
color	'red' \| 'yellow' \| 'orange'	'red'	Alert color
dismissable	boolean	false	Shows a dismiss (×) button
ondismiss	() => void	undefined	Callback when dismiss is clicked
class	string	undefined	Additional CSS classes

Install

npx @vultra/cli add flat-triangle-alert