Notifications give your site an application-like feel by providing dynamic messaging components that work in real time and organize themselves.

Show Status Show Growl

Statuses

Statuses are once-only notifications best for streaming system information. Once-only means each new status replaces its previous one and only one shows at a time. See throttling for more information

k$.status({
  text: 'Saved successfully',
  type: 'status-green'
})

Options

Statuses take additional parameters to allow you to hold on to them for longer, even forever, and style them appropriately.

Available colors include:

  • status-red
  • status-orange
  • status-yellow
  • status-green
  • status-blue
  • status-violet

You may also use your theme's primary and secondary colors via status-primary and status-secondary 

// Defaults are shown

k$.status({
  text: 'Saved successfully', // No default
  delay: 2000, // Optional, 0 = forever
  type: 'status-yellow', // Optional, yellow is default
  id: '' // Optional, for targeting with JavaScript
})

Growls

Growls are stackable, right-aligned notifications. Unlike statuses, creating one growl does not replace the existing one. Each Growl has its own delay and styling properties. Unlike statuses, they are also dismissable like a modal.

// Defaults are shown

k$.growl({
  title: 'Greetings'
})

Options

Growls have similar flexibility as statuses.

// Defaults are shown

k$.growl({
  title: 'Greetings',
  text: 'We\'re happy to inform you your document was saved.', // Optional
  delay: 2000, // Optional, 0 = forever
  type: 'alert-warn', // Optional
  id: 'token' // Optional
})

Growls are also fed through k$.buffer as a UX concern to prevent overloading the screen with messages. By default, only one growl can show per half second. Subsequent growls will be buffered and shown after others have been dismissed. See buffers for more information.

To use different stylings, just pass in a class name to the type property. By default, this is appended as a class on .growl

To use different stylings, just borrow from one of the alert color classes. (Growls inherit from the alert styles)

k$.growl({
  title: 'It worked!',
  type: 'alert-success'
})


.growl {
  &.alert-success {
    background: map-get($colors, green);
  }
}