GroupCollect 1.3.142

Welcome
Welcome
Usage
Best practices Usage
A
Buttons and Links A
Button
Buttons and Links Button
Button Group
Buttons and Links Button Group
Icon Button
Buttons and Links Icon Button
Submit
Buttons and Links Submit
Usage
Buttons and Links Usage
Badge
Data Presentation Badge
Calendar
Data Presentation Calendar
Chip
Data Presentation Chip
Condensed Card
Data Presentation Condensed Card
Details Card
Data Presentation Details Card
Document Preview
Data Presentation Document Preview
Info Box
Data Presentation Info Box
Info Box Group
Data Presentation Info Box Group
Info Section
Data Presentation Info Section
Line Item Card
Data Presentation Line Item Card
Picker Card
Data Presentation Picker Card
Table
Data Presentation Table
Table Card
Data Presentation Table Card
Usage
Data Presentation Usage
Checkbox
Form controls Checkbox
Combobox
Form controls Combobox
Custom Time
Form controls Custom Time
Date Picker
Form controls Date Picker
Date Range Picker
Form controls Date Range Picker
Drag And Drop
Form controls Drag And Drop
Dropdown
Form controls Dropdown
Error
Form controls Error
Error Box
Form controls Error Box
Error Summary
Form controls Error Summary
Fieldset
Form controls Fieldset
Filter Date Range Picker
Form controls Filter Date Range Picker
Input Group
Form controls Input Group
Live Search
Form controls Live Search
Money
Form controls Money
Number
Form controls Number
Password
Form controls Password
Percentage
Form controls Percentage
Phone
Form controls Phone
Radio
Form controls Radio
Search
Form controls Search
Select
Form controls Select
Simple Form
Form controls Simple Form
Text
Form controls Text
Textarea
Form controls Textarea
Toggle
Form controls Toggle
Upload Zone
Form controls Upload Zone
Upload Zone Portal Target
Form controls Upload Zone Portal Target
Usage
Form controls Usage
App Frame
Frames App Frame
Blank Form Frame
Frames Blank Form Frame
Usage
Frames Usage
Avatar
Icons and Images Avatar
Avatar Group
Icons and Images Avatar Group
Icon
Icons and Images Icon
Usage
Icons and Images Usage
Box
Layout Box
Center
Layout Center
Cluster
Layout Cluster
Hr
Layout Hr
Responsive
Layout Responsive
Row
Layout Row
Stack
Layout Stack
Stacking Cluster
Layout Stacking Cluster
Usage
Layout Usage
Modal
Modals Modal
Usage
Modals Usage
Action Menu
Navigation Action Menu
Breadcrumbs
Navigation Breadcrumbs
Pagination
Navigation Pagination
Tabs
Navigation Tabs
Usage
Navigation Usage
Flash
Notifications Flash
Tooltip
Notifications Tooltip
Usage
Notifications Usage
Paragraph
Typography Paragraph
Typography
Typography Typography
Usage
Typography Usage
Visually Hidden
Utility classes Visually Hidden

A

Renders an anchor component.

This is a wrapper around Phoenix.Component.link/1 and is used the same way.

Links can be styled as buttons:

<.a href="#" size="lg" as="button">link</a>

When given the as attribute, many of the attributes from the button components are available. See DesignSystem.Components.Button.

Text links with different sizes Open in playground

Extra Small Link Small Link Base Link Large Link

<.a size="xs">
  Extra Small Link
</.a>
<.a size="sm">
  Small Link
</.a>
<.a size="base">
  Base Link
</.a>
<.a size="lg">
  Large Link
</.a>

Button styled links Open in playground

Primary Button Link Secondary Button Link Ghost Button Link Danger Button Link Compact Button Link Primary Button Link with icon Primary Button Link with icon Secondary Button Link with icon Secondary Button Link with icon Danger Button Link with icon Danger Button Link with icon Ghost Button Link with icon Ghost Button Link with icon Compact Button Link with icon Compact Button Link with icon

<.a primary as="button">
  Primary Button Link
</.a>
<.a as="button" secondary>
  Secondary Button Link
</.a>
<.a as="button" ghost>
  Ghost Button Link
</.a>
<.a as="button" danger>
  Danger Button Link
</.a>
<.a compact as="button">
  Compact Button Link
</.a>
<.a primary as="button" icon="plus">
  Primary Button Link with icon
</.a>
<.a primary as="button" icon="acorn" icon_weight="light">
  Primary Button Link with icon
</.a>
<.a as="button" icon="plus" secondary>
  Secondary Button Link with icon
</.a>
<.a as="button" icon="acorn" secondary icon_weight="light">
  Secondary Button Link with icon
</.a>
<.a as="button" icon="plus" danger>
  Danger Button Link with icon
</.a>
<.a as="button" icon="acorn" danger icon_weight="light">
  Danger Button Link with icon
</.a>
<.a as="button" icon="plus" ghost>
  Ghost Button Link with icon
</.a>
<.a as="button" icon="acorn" ghost icon_weight="light">
  Ghost Button Link with icon
</.a>
<.a compact as="button" icon="plus">
  Compact Button Link with icon
</.a>
<.a compact as="button" icon="acorn" icon_weight="light">
  Compact Button Link with icon
</.a>

Back links Open in playground

Go Back

<.a size="sm" as="back-link">
  <.row space="xs" justify="start" align="center">
    <.icon name="arrow-left" size="sm" /> Go Back
  </.row>
</.a>

Unstyled links Open in playground

Small link

<.a as="unstyled">
  Small link
</.a>