Storybook
-
Theme
-
Light
-
Dark
-
System
-
Light tone
-
Light
-
Light high contrast
-
Light colorblind
-
Light Tritanopia
-
Dark tone
-
Dark
-
Dark dimmed
-
Dark high contrast
-
Dark colorblind
-
Dark Tritanopia
-
Reset to default
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
- Scoped
Truncate
Shortens text with ellipsis.
-
Documentation
- truncate
Basic
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt
Custom tags
- organisation
- / department
- / tickets
- / #99 —
- User cannot register on the website
Delay truncate
- organisation
- / department
- / tickets
- / #99 —
- User cannot register on the website
Expand on hover
Note: this does not work well on small screens.
Custom max widths
Lorem ipsum dolor sit amet consectetuer
Lorem ipsum dolor sit amet consectetuer
Lorem ipsum dolor sit amet consectetuer
-
On this page
- Top of page
- Documentation
-
Stories
- Basic
- Custom tags
- Delay truncate
- Expand on hover
- Custom max widths
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
-
- Underline nav
- Scoped