Toast notification system with multiple styles and persistent alerts
The Notification component displays on-screen toast messages to provide feedback to players. Supports multiple styles, custom icons, durations, and persistent notifications.
-- Client side-- Show persistent successNotification.Persistent:Success( 'heist_active', 'Heist in progress', 'mask')-- Remove it laterNotification.Persistent:Remove('heist_active')
-- Client sidelocal currentWantedLevel = 0AddEventHandler('police:client:UpdateWantedLevel', function(level) -- Remove old notification if currentWantedLevel > 0 then Notification.Persistent:Remove('wanted_level') end currentWantedLevel = level if level > 0 then -- Show new wanted level local color = '#fbbf24' -- Yellow if level >= 4 then color = '#dc2626' -- Red elseif level >= 2 then color = '#f97316' -- Orange end Notification.Persistent:Custom( 'wanted_level', string.format('Wanted Level: %d', level), 'star', { background = color, color = '#000000' } ) endend)
-- Client sidelocal fuelWarningActive = falseCreateThread(function() while true do Wait(5000) -- Check every 5 seconds local ped = PlayerPedId() local vehicle = GetVehiclePedIsIn(ped, false) if vehicle ~= 0 and GetPedInVehicleSeat(vehicle, -1) == ped then local vState = Entity(vehicle).state local fuel = vState.Fuel or 100 if fuel <= 10 and not fuelWarningActive then -- Show warning Notification.Persistent:Warn( 'fuel_warning', 'Fuel critically low!', 'gas-pump' ) fuelWarningActive = true elseif fuel > 10 and fuelWarningActive then -- Remove warning Notification.Persistent:Remove('fuel_warning') fuelWarningActive = false end elseif fuelWarningActive then -- Player left vehicle Notification.Persistent:Remove('fuel_warning') fuelWarningActive = false end endend)
-- ✅ GOOD - Use correct typesNotification:Success('Item crafted') -- Green for successNotification:Error('No permission') -- Red for errorsNotification:Warn('Low health') -- Orange for warningsNotification:Info('Tip: Press E') -- Blue for info-- ❌ BAD - Wrong typesNotification:Success('Error occurred') -- Don't use success for errorsNotification:Error('Purchase complete') -- Don't use error for success
-- Short messages (default 2.5s is fine)Notification:Success('Saved')-- Medium messages (3-4s)Notification:Info('New GPS waypoint set to destination', 3500)-- Long messages (5-6s)Notification:Warn('You are entering a dangerous area. Be careful!', 5000)// ❌ BAD - Too short for long messageNotification:Info('This is a very long notification message that players need time to read', 1000)// ❌ BAD - Too long for short messageNotification:Success('OK', 10000)
// ✅ GOOD - Use for ongoing statusNotification.Persistent:Info('race_active', 'Race Active')Notification.Persistent:Warn('wanted', 'Wanted Level: 3')// ❌ BAD - Don't use for one-time eventsNotification.Persistent:Success('item_bought', 'Item purchased') // Use standard Success instead// ✅ GOOD - Always clean upAddEventHandler('race:client:End', function() Notification.Persistent:Remove('race_active')end)